fullCalendar 将所有内容显示为 allDay

Posted

技术标签:

【中文标题】fullCalendar 将所有内容显示为 allDay【英文标题】:fullCalendar displaying everything as allDay 【发布时间】:2013-04-19 16:57:51 【问题描述】:

我创建了一个保存到 mysql 的日历。

我将时间范围事件的 allDay 值设置为 false,但日历将其显示为全天。

这会获取事件..

$sql = mysql_query('SELECT * FROM `companies`.`calendar`');
$'Events' = array();
while($'Event' = mysql_fetch_assoc($sql))
    $'Events'[] = $'Event';

我的桌子快照:

这是我的 jQuery

$(document).ready(function() 

     $('#eventToAdd').dialog( 
        autoOpen: false,
        height: '300',
        width: '550',
        modal: true,
        resizable: false,
        position: 'center',
    );

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar(
        theme: true,
        header: 
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        ,
        loading: function(bool) 
            if (bool) $('#loading').show();
            else $('#loading').hide();
        ,
        eventClick: function(calEvent, jsEvent, view) 
            $('#eventTitle').val(calEvent.title);
            $('#textColor').val(calEvent.textColor);
            $('#backgroundColor').val(calEvent.color);
            $("#eventToAdd").dialog(
                autoOpen: true,
                title: "Update Event",
                modal: true,
                buttons: [
                
                    text:"Update Event",
                    click: function () 
                        if($('#eventTitle').val())
                              calEvent.title = $('#eventTitle').val();
                              calEvent.color = $('#backgroundColor').val();
                              calEvent.textColor = $('#textColor').val();
                              calendar.fullCalendar('updateEvent',calEvent); 
                              $.post('post.api.php',  'api': 'updateEvent', 'id': calEvent.id, 'title': calEvent.title, 'start': $.fullCalendar.formatDate(calEvent.start, 'yyyy-MM-dd h:mm:ss tt'), 'end': $.fullCalendar.formatDate(calEvent.end, 'yyyy-MM-dd h:mm:ss tt'), 'allDay': calEvent.allDay, 'bgColor': calEvent.color, 'textColor': calEvent.textColor , function(resp) 
                                  if(resp == 'SUCCESS') 
                                      jAlert('The event has been updated','Updated');
                                   else 
                                      jAlert('There was an error updating the event<br />Please try again later.<br />ERROR CODE: 728375', 'Process Error');
                                  
                                  $('#eventToAdd').dialog('close');
                              );
                        
                    
                ,
                
                    text: "Cancel",
                    click: function()  $(this).dialog('close'); 
                ]
            );
        ,
        selectable: true,
        selectHelper: true,
        select: function (start, end, allDay, jsEvent, view) 
            $("#eventToAdd").dialog(
            
                autoOpen: true,
                title: "Create Event",
                modal: true,
                buttons: [
                
                    text:"Create Event",
                    click: function () 
                        if($('#eventTitle').val())
                            calendar.fullCalendar('renderEvent',
                            
                                title: $('#eventTitle').val(),
                                start: $.fullCalendar.formatDate(start, 'yyyy-MM-dd h:mm:ss tt'),
                                end: $.fullCalendar.formatDate(end, 'yyyy-MM-dd h:mm:ss tt'),
                                allDay: allDay,
                                textColor: $('#textColor').val(),
                                color: $('#backgroundColor').val()
                            ,
                            true
                        ); 
                        var startDate = $.fullCalendar.formatDate(start, 'yyyy-MM-dd h:mm:ss tt');
                        var endDate = $.fullCalendar.formatDate(end, 'yyyy-MM-dd h:mm:ss tt');
                        $.post('post.api.php',  'api': 'createEvent', 'title': $('#eventTitle').val(), 'start': startDate, 'end': endDate, 'allDay': allDay, 'textColor': $('#textColor').val(), 'bgColor': $('#backgroundColor').val() , function(response) 
                            if(response == 'SUCCESS')
                                jAlert('The event has been saved!','Event Created');
                             else 
                                jAlert('There was an error saving your event<br />Please try again later or let JD know<br />ERROR CODE: 882293','Process Error');
                            
                        );
                        
                        $(this).dialog('close');
                    
                ,
                
                    text: "Cancel",
                    click: function()  $(this).dialog('close'); 
                
                ],
                close: function()
                    $('#eventTitle').val('');
                    $('#textColor').val('');
                    $('#backgroundColor').val('');     
                
            );
        ,
        editable: true,
        events: <?= $'Events'; ?>

    );


);

【问题讨论】:

您确定 allDay 被设置为 false 而不是“false”(即字符串)吗?此外,如果没有什么是 allDay 你可以使用allDayDefault 你能用 $'Events' 数组更新你的问题吗? 我是个白痴……来晚了……哈哈……这是一个不是布尔值的字符串 更改了数组以执行此操作。$sql = mysql_query('SELECT * FROM companies.calendar'); $'Events' = array(); while($'Event' = mysql_fetch_assoc($sql)) $'Event'['allDay'] = $'Event'['allDay'] === 'false' ? false : true; $'Events'[] = $'Event'; 【参考方案1】:

记录值应返回为 false(不带引号);不是“假的”。我遇到了同样的问题并应用了这个简单的解决方案:

// -----------------------
while ($row = mysql_fetch_assoc($sql)) 
// -----------------------
if ($row['event_allday'] = 'false') 
$allDayStatus = false;

// -----------------------
$eventsArray['id'] =  $row['event_id'];
$eventsArray['title'] = $row['event_title'];
$eventsArray['start'] = $row['event_start'];
$eventsArray['end'] = $row['event_end'];
$eventsArray['url'] = $row['event_url'];
$eventsArray['allDay'] = $allDayStatus;
$eventsArray['className'] = $row['event_class'];
$eventsArray['admNotes'] = $row['event_adm_notes'];
// -----------------------

【讨论】:

以上是关于fullCalendar 将所有内容显示为 allDay的主要内容,如果未能解决你的问题,请参考以下文章

无法访问嵌套事件对象的属性 - Fullcalendar jquery插件

删除fullCalendar中的所有eventSource

FullCalendar日历插件说明文档

fullcalendar在上午10点之前没有显示时间

FullCalendar 日历插件中文说明文档

根据其他ID参数过滤Fullcalendar事件