Question

我需要一个日历选项，需要在其上标记假期和日期的假期和说明。如何使用自定义选项创建日历？是否可以使用jquery？

Answer 1

HTMl

    <div id="calEventDialog">
    <form>
        <fieldset>
        <label for="eventTitle">Title</label>
        <input type="text" name="eventTitle" id="eventTitle" /><br>
        <label for="eventStart">Start Date</label>
        <input type="text" name="eventStart" id="eventStart" /><br>
        <label for="eventEnd">End Date</label>
        <input type="text" name="eventEnd" id="eventEnd" /><br>
        <input type="radio" id="allday" name="allday" value="1">
        Half Day
        <input type="radio" id="allday" name="allday" value="2">
        All Day
        </fieldset>
    </form>
</div>
<div style="border:solid 2px red;">
        <div id='myCalendar'></div>
</div>

和JS

$(document).ready(function() {
    var dates = $("#eventStart, #eventEnd").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        onSelect: function(selectedDate) {
            var option = this.id == "eventStart" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
            dates.not(this).datepicker("option", option, date);
        }
    });

    $myCalendar = $('#myCalendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        theme: true,
        selectable: true,
        selectHelper: true,
        height: 500,
        select: function(start, end, allDay) {
            $('#eventStart').datepicker("setDate", new Date(start));
            $('#eventEnd').datepicker("setDate", new Date(end));
            $('#calEventDialog').dialog('open');
        },
        eventClick: function(calEvent, jsEvent, view) {
            $('#eventStart').datepicker("setDate", new Date(calEvent.start));
            $('#eventEnd').datepicker("setDate", new Date(calEvent.end));
            $('#calEventDialog #eventTitle').val(calEvent.title);
            $('#calEventDialog #allday').val([calEvent.className == "gbcs-halfday-event" ? "1" : "2"]).prop('checked', true);
            $("#calEventDialog").dialog("option", "buttons", [
                {
                text: "Save",
                click: function() {
                    $(this).dialog("close");
                }},
            {
                text: "Delete",
                click: function() {
                    $(this).dialog("close");
                }},
            {
                text: "Cancel",
                click: function() {
                    $(this).dialog("close");
                }}
            ]);
            $("#calEventDialog").dialog("option", "title", "Edit Event");
            $('#calEventDialog').dialog('open');
        },
        editable: true
    });

    var title = $('#eventTitle');
    var start = $('#eventStart');
    var end = $('#eventEnd');
    var eventClass, color;
    $('#calEventDialog').dialog({
        resizable: false,
        autoOpen: false,
        title: 'Add Event',
        width: 400,
        buttons: {
            Save: function() {
                if ($('input:radio[name=allday]:checked').val() == "1") {
                    eventClass = "gbcs-halfday-event";
                    color = "#9E6320";
                    end.val(start.val());
                }
                else {
                    eventClass = "gbcs-allday-event";
                    color = "#875DA8";
                }
                if (title.val() !== '') {
                    $myCalendar.fullCalendar('renderEvent', {
                        title: title.val(),
                        start: start.val(),
                        end: end.val(),
                        allDay: true,
                        className: eventClass,
                        color: color
                    }, true // make the event "stick"
                    );
                }
                $myCalendar.fullCalendar('unselect');
                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });
});

参考http://jsfiddle.net/100thGear/xgSTr/

Answer 2

您可以使用Zabuto日历插件。请在下面的链接http://zabuto.com/dev/calendar/examples/index.html

中找到其说明

包含以下js文件

<!-- js start -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type = "text/javascript" src="js/zabuto_calendar.js"></script>
<script type="text/javascript" src="js/holiday.json"></script>

<!-- js end -->

包含以下css文件

<!-- css start -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/zabuto_calendar.min.css">
<!-- css end -->

包含下面以json格式传递事件数据的脚本并调用插件

  <script>
    var date=[];
    var event=[];
    var e=[];
     $(document).ready(function() {

     holidayList();
                    $(".my-calendar").zabuto_calendar({
                        cell_border : true,
                        today : true,
                        data : e,


    });
});

     function holidayList(obj){
    $.each(data, function(key, val) {
    date[key]=changeFormat(val.holidayDate);
    event[key]=val.description;
    //alert(DT[key]);
     e[key] = {"date": date[key],"badge": false,"title": event[key]};

    var e1 = $('<label class="col-offset-2">'+val.holidayDate+' :   '+val.description+'</label><br>');
                        $('#Holiday').append(e1); 


                        });

    </script>

并使用以下html代码显示日历

<!-- main content start -->
<div class="holidayCalender">
    <div class="my-calendar">
    </div>
    <div class="container">
        <div id="Holiday" class="col-sm-6 " >
        </div>
    </div>

</div>
<!-- main content ends -->

创建可自定义的日历

2 个答案: