jQuery | CLNDR 插件

jQuery使用 HTML 模板提供前端日历CLNDR插件，主要用于单日或多日事件管理系统。它用于以日历格式指定各种事件的日期。

您必须在工作文件夹中下载所需的文件，以便程序员可以将其包含在 HTML 结构页面的头部部分，如在以下程序中实现的那样。

注意：将“underscore.js”和“moment.js”库包含在头部部分，在“clndr.js”之前，因为CLNDR插件依赖于这些库。 CLNDR插件的下载链接。

示例 1：以下示例演示了CLNDR插件的基本用法，该插件以日历格式显示当前月份。 “showAdjacentMonths”和“adjacentDaysChangeMonth”等选项设置为true，以便快速轻松地遍历上个月和下个月。

    
        jQuery Calender Plugin
        
        
  
        
       
        
        
        
        
        
        
            body {
                font-family: Arial;
                text-align: center;
            }
        
    
    
        GeeksForGeeks
        jQuery CLNDR Plugin
        
            
        
  
        
            var calendar = {};
            $(document).ready(function () {
                calendar.clndr = $(".cal1").clndr({
                    
                   // Able to display adjacent months
                    showAdjacentMonths: true, 
                    
                  // Visible adjacent days will show 
                  // corresponding month on click
                    adjacentDaysChangeMonth: true, 
                });
  
                // Going forward monthwise
                calendar.forward();
                // Going back to previous month
                calendar.back();
            });
        
    

输出 ：

示例 2：以下示例演示了使用 CLNDR插件传递用于信息显示的事件。在jQuery代码中，事件列表以数组的形式传递给CLNDR点击事件。一旦用户单击事件日期，它就会以“红色”颜色显示日期和底部的事件标题。星期几也以特定格式设置。程序员可以根据应用需求设置其他选项。

    
        jQuery CLNDR Plugin
        
        
  
        
        
        
        
        
        
        
        
            body {
                font-family: Arial;
                text-align: center;
            }
  
            div#eventInfoID {
                margin-top: 5px;
                width: 90%;
                text-align: center;
                font-weight: bold;
                padding: 10px;
                box-sizing: content-box;
            }
        
    
    
        GeeksForGeeks
        jQuery CLNDR Plugin
        
            
            
        
  
        
            var calendar = {};
            $(document).ready(function () {
                var eventsList = [
                    {
                        date: "2020-05-08",
                        title: "Open lecture on web",
                    },
                    {
                        date: "2020-05-20",
                        title: "Another Long Event",
                    },
                    {
                        title: "Birthday Party",
                        date: "2020-05-27",
                    },
                ];
  
                calendar.clndr = $(".cal1").clndr({
                    
                    // Displays days of the week in given format
                    daysOfTheWeek: ["Sun", "Mon", "Tue", 
                                    "Wed", "Thu", "Fri", "Sat"],
                    events: eventsList,
                    clickEvents: {
                        click: function (target) {
                            $(".day .day-contents").css("color", "#000");
                            
                            // Displays the event date in red, once clicked
                            $(".calendar-day-" + target["date"]["_i"] + " .day-contents")
                              .css("color", "#FF0000");
                            var titleInfo = target.events[0].title;
                            $("#eventInfoID").text(titleInfo);
                        },
                    },
                    showAdjacentMonths: true,
                    adjacentDaysChangeMonth: false,
                });
            });
        
    

输出： CLNDR 插件还可以通过访问数组对象中事件的开始和结束日期，以类似于单日事件的方式处理多日事件。

示例 3：以下示例演示了具有一些约束的 CLNDR插件，例如选择日历中特定范围内的日期。它有助于处理 Web 应用程序中的大量用户和日期验证。

    
        jQuery CLNDR plugin
        
        
        
        
        
        
        
        
        
        
            body {
                font-family: Arial;
            }
            .msg-row {
                padding: 5px;
            }
            .container {
                width: 650px;
            }
            #constraintInfoID {
                margin-top: 5px;
                margin-left: 5px;
                width: 600px;
                text-align: center;
                font-weight: bold;
                padding: 10px 10px;
                box-sizing: content-box;
            }
        
    
    
        GeeksForGeeks
        jQuery CLNDR Plugin
        
            
            
        
  
        
            var calendar = {};
            $(document).ready(function () {
                calendar.clndr = $("#calendarID").clndr({
                    constraints: {
                        startDate: "2020-05-06",
                        endDate: "2020-05-16",
                    },
                    clickEvents: {
                        click: function (target) {
                            if (!$(target.element).hasClass("inactive")) {
                                var msg = "Valid date within the constraints!";
                                $("#constraintInfoID")
                                  .append("<div class='msg-row' 
                                                style='background-color:green'>" 
                                          + msg + "</div>");
                            } else {
                                var msg = "Date chosen is outside the constraint range";
                                $("#constraintInfoID")
                                  .append("<div class='msg-row' 
                                                style='background-color:red'>" 
                                          + msg + "</div>");
                            }
                        },
                    },
                });
            });
        
    

输出：