使用FullCalendar为具有事件的天添加背景

时间:2017-07-19 14:57:04

标签: javascript json ajax fullcalendar

我已经定义了一个函数来检查日期是否有一个返回true或false的事件。出于某种原因,它将第二天的细胞转变为颜色而不是具有事件的那一天。奇怪的是,我的合作伙伴正在使用Linux并且它正确地显示给他,但是我尝试使用任何操作系统的每台计算机或虚拟机都显示不正确。以下是相关代码和显示问题的jsfiddle:

    $(document).ready(function() {
var events = [];
$.ajax({
                url : 'https://showmeyouraxels.me/browse.php',
                type : 'post',
                dataType: 'json',
                success: function(e){
                    console.log(e[0].title);
                    for(var i = 0; i < e.length; i++){
                            events.push({
                                    title : e[i].title,
                                    start : moment(e[i].start).toDate('2017/07/18 12h:00'),
                                    end : moment(e[i].end).toDate('2017/07/18 12h:30'),
                                    icon: "https://www.qrstuff.com/images/sample.png",
                            });
                        }
                    console.log(events);
                    createCalendar();
                }
        });
function createCalendar(){

  var calendar = $('#calendar').fullCalendar({
        customButtons: {
            myCustomButton: {
                text: 'Add Event',
                click: function() {
                  alert('add event');
                }
            }
        },
         header: {
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        editable : false,
        eventLimit: true,
                eventLimitText: '',
                dayRender: function (date, cell) {
                    if ( !dateHasEvent(date) ){
                            cell.css("background-color", "initial");
                            console.log('no event ' + date.toDate());
                    }
                    else if ( dateHasEvent(date) ){
                            cell.css("background-color", "#6b7c8c");
                            console.log('event ' + date.toDate());
                    }
                },

        eventClick: function(calEvent, jsEvent, view, element) {
                    var inner = new Date(calEvent.start) + ' to ' + new Date(calEvent.end);
                    swal({
                            title: calEvent.title,
                            html: true,
                            text: inner,
                            allowOutsideClick: true
                    });
        },
                dayClick: function(dayEvent, jsEvent, view, element){
                    console.log(dayEvent);
                },
        eventRender: function(event, element) {
                    element.find('.fc-content').html('<img src="http://simpleicon.com/wp-content/uploads/flag.svg" height="10px"/><br>' +event.title);

        },
    });
        calendar.fullCalendar( 'addEventSource', events);
    }

    function dateHasEvent(date) {
        var hasEvent = false;
        for(var i = 0; i < events.length; i++){
         var thatDate = events[i].start.toString();
         thatDate = thatDate.split(' ');
         thatDate = thatDate[1] +' '+thatDate[2] +' '+thatDate[3];

         var thisDate = date.toDate().toString();
         thisDate = thisDate.split(' ');
         thisDate = thisDate[1] +' '+thisDate[2] +' '+thisDate[3];

         if(thisDate == thatDate){
             hasEvent = true;
            }
        }
        return hasEvent;
    }

});

JSFiddle

过去一天我一直在摸不着头脑,我不得不想象我错过了一些蠢事。 感谢您提供任何帮助!

0 个答案:

没有答案