MVC中使用jquery的完整日历

Question

我正在努力理解完整的日历。。我不知道如何使用选择或颜色之类的方法。请给我一个例子，用不同的颜色为我的每个活动日上色。点击当天的互动程序时，会有一条消息要求我们添加一个活动。我读过http://fullcalendar.io/docs/但我不明白，怎么改变。

 <link href="~/Content/calendar/fullcalendar.css" rel="stylesheet" />
    <link href="~/Content/calendar/fullcalendar.print.css" rel="stylesheet" media='print' />
    <link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
    <style>
        body {
            margin: 40px 10px;
            padding: 15px;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }
        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
    <div id='calendar'></div>
@section scripts{
<script src="~/Scripts/calendar/moment.min.js"></script>
<script src="~/Scripts/calendar/jquery.min.js"></script>
<script src="~/Scripts/calendar/fullcalendar.min.js"></script>
<script src="~/Scripts/calendar/jquery-ui.custom.min.js"></script>
<script>
    $(document).ready(function () {
        $('#calendar').fullCalendar(Duration,'00:30:00');
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
                     },
            defaultDate: '2015-02-12',
                    selectable: true,
            selectHelper: true,
            select: function (start, end) {
                var title = prompt('Event Title:');
                var eventData;
                if (title) {
                    eventData = {
                        title: title,
                        start: start,
                        end: end
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                }
                $('#calendar').fullCalendar('unselect');
            },
            slotDuration:'00:00:15',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
                {
                    title: 'All Day Event',
                    start: '2015-02-01'
                },
                {
                    title: 'Long Event',
                    start: '2015-02-07',
                    end: '2015-02-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2015-02-09T16:00:00'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2015-02-16T16:00:00'
                },
                {
                    title: 'Conference',
                    start: '2015-02-11',
                    end: '2015-02-13'
                },
                {
                    title: 'Meeting',
                    start: '2015-02-12T10:30:00',
                    end: '2015-02-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2015-02-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2015-02-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2015-02-12T17:30:00'
                },
                {
                    title: 'Dinner',
                    start: '2015-02-12T20:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2015-02-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2015-02-28'
                }
            ]
        });
    });
</script>
}

Answer 1

以下代码用于为fullcalender中的不同事件赋予颜色。

{
                title: 'All Day Event',
                start: '2015-02-01',
                backgroundColor: '#000'
            },
            {
                title: 'Long Event',
                start: '2015-02-07',
                end: '2015-02-10',
                backgroundColor: '#DDD'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2015-02-09T16:00:00',
                backgroundColor: '#CCC'
            },

为特定事件提供一个带有颜色代码的backgroundColor参数。

如果您想在点击事件标题时打开一个新事件的弹出窗口，则使用以下代码。

var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },          
        defaultView: '<?php echo $view; ?>',
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {
            $.ajax({
                url:"<?php echo site_url("controller/function_name");?>/"+convert_date(start),
                cache:false,
                data:"event_name="+convert_date(start),
                success:function(data){
                    //alert(data);
                    if(data=="holiday" || data=="no"){
                        $( ".modalbox" ).on( "click", function() {
                        });
                        //$("#day_"+convert_date(start)).css("background-color","#f00");                                                                
                        $("#event_date").val(start);
                        summary();
                        summary_change($("#reminder").val());
                        //$("#date_of_end").val(convert_date_mdy(start));
                        //$("#summary_date").val(convert_date_mdy(start));
                    }
                    else{
                        $( ".modalbox" ).on( "click", function() {
                        });
                        $( ".modalbox" ).trigger( "click" );
                        $("#event_date").val(start);    
                        summary();
                        summary_change($("#reminder").val());
                        //$("#date_of_end").val(convert_date_mdy(start));
                        //$("#summary_date").val(convert_date_mdy(start));
                    }                       
                }
            });
            $("#addSchedule").submit(function(){
            title=$("#shift").val();
            if (title!="") {
                date=convert($("#event_date").val());
                end_date=convert(end);
                $("#event_date").val(date);
                $("#end_date").val(end_date);
                $("#allDay").val(allDay);
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start:$("#event_date").val(),
                        end: end,
                        allDay: allDay
                    },              
                );
            }
            $("#holder").hide();
            //return false;
            });
            calendar.fullCalendar('unselect');
        },
        editable: true,
        events: <?php echo $result;?>,          
        eventClick: function(event) {
            $.ajax({
                url:"<?php echo site_url("controller/function_name");?>/"+event.event_id,
                cache:false,
                data:"event_name="+event.title,
                success:function(data){
                    $("#inline1").html(data);
                    $( ".modalbox1" ).on( "click", function() {
                    });
                    $( ".modalbox1" ).trigger( "click" );
                }
            });             
        },
    });

eventClick参数将在您单击fullcalendar上的特定事件时生效。