fullcalendar.io-全天活动更新

Question

试图确切地弄清楚我如何通过使用jQuery fullcalendar将约会从整天转换为整天的预约。我将约会拖入allday插槽时得到的是一个错误，即结束时间为null。有人成功地工作了吗？我正在使用EWS更新服务器上的交换日历。该部分效果很好，我只需要澄清如何将时间范围更改为全天。谢谢！

<%@ Page Title="Group Calendar" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Calendar.aspx.cs" Inherits="WebUI.Calendar" %>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeadContent" runat="server">
<link type="text/css" href='<% = Page.ResolveUrl("~/Scripts/fullcalendar/fullcalendar.min.css")%>' rel='stylesheet' />
<link type="text/css" href='<% = Page.ResolveUrl("~/Scripts/fullcalendar/fullcalendar.print.min.css")%>' rel='stylesheet' media='print' />
<script type="text/javascript" src='<% = Page.ResolveUrl("~/Scripts/fullcalendar/moment.min.js")%>'></script>
<script type="text/javascript" src='<% = Page.ResolveUrl("~/Scripts/fullcalendar/jquery.min.js")%>'></script>
<script type="text/javascript" src='<% = Page.ResolveUrl("~/Scripts/fullcalendar/jquery-ui.min.js")%>'></script>
<script type="text/javascript" src='<% = Page.ResolveUrl("~/Scripts/fullcalendar/fullcalendar.min.js")%>'></script>
<script type="text/javascript" src='<% = Page.ResolveUrl("~/Scripts/fullcalendar/theme-chooser.min.js")%>'></script>
<script type="text/javascript">
    $(document).ready(function () {
        initThemeChooser({
            init: function (themeSystem) {
                $('#calendar').fullCalendar({
                    themeSystem: themeSystem,
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay,listMonth'
                    },
                    selectable: true,
                    selectHelper: true,
                    weekNumbers: true,
                    navLinks: true,
                    editable: true,
                    eventLimit: true,
                    events:  <% =JsonEvent %>,
                    eventDrop: function (event, delta, revertFunc) {
                        if (!confirm("Are you sure about this change?"))     {
                            revertFunc();
                        } else {
                            UpdateEvent(event);
                            $(this).fullCalendar( 'refetchEvents' );
                        }
                    },
                    eventResize: function(event, delta, revertFunc) {
                        alert(event.title + " changed end is now " + event.end.format());
                        if (!confirm("is this okay?")) {
                            revertFunc();
                        }
                        else
                        {
                            UpdateEvent(event);
                            $(this).fullCalendar( 'refetchEvents' );
                        }
                    },
                    eventClick: function(calEvent, jsEvent, view) {
                        alert('Event: ' + calEvent.title + 'nDate: ' + moment(calEvent.Start).format("MM-DD-YYYY") + 'nStart: ' + moment(calEvent.start).format("hh:mm:ss A") + 'nEnd: ' + moment(calEvent.end).format("hh:mm:ss A"));
                        $(this).fullCalendar( 'refetchEvents' );
                        // change the border color just for fun
                        $(this).css('border-color', 'red');
                    }
                });
                function UpdateEvent(event)
                {
                    var data = {};
                    data.id = event.id;
                    data.starts = event.start;
                    data.ends = event.end;
                    data.subject = event.title;
                    $.ajax({
                        url: 'Calendar.aspx/UpdateEvent',
                        method: 'POST',
                        dataType: 'JSON',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(data),
                        success: function (response, type, xhr) {
                            var retVal = JSON.stringify(response);
                        },
                        error: function (xhr) {
                            window.alert('error: ' + xhr.statusText);
                        }
                    });
                }
            },
            change: function (themeSystem) {
                $('#calendar').fullCalendar('option', 'themeSystem', themeSystem);
            }
        });
    });
</script>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
    #top,
    #calendar.fc-unthemed {
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    }
    #top {
        background: #eee;
        border-bottom: 1px solid #ddd;
        padding: 0 10px;
        line-height: 40px;
        font-size: 12px;
        color: #000;
    }
        #top .selector {
            display: inline-block;
            margin-right: 10px;
        }
        #top select {
            font: inherit; /* mock what Boostrap does, don't compete  */
        }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .clear {
        clear: both;
    }
    #calendar {
        max-width: 900px;
        margin: 40px auto;
        padding: 0 10px;
    }
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size: 14px;
    }
    .fc th {
        padding: 10px 0px;
        vertical-align: middle;
        background: #F2F2F2;
    }
    .fc-day-grid-event > .fc-content {
        padding: 4px;
    }
    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }
    .error {
        color: #ac2925;
        margin-bottom: 15px;
    }
    .event-tooltip {
        width: 150px;
        background: rgba(0, 0, 0, 0.85);
        color: #FFF;
        padding: 10px;
        position: absolute;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 11px;
    }
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id='top'>
    <div class='left'>
        <div id='theme-system-selector' class='selector'>
            Theme System:
            <select>
                <option value='bootstrap3' selected>Bootstrap 3</option>
                <option value='jquery-ui'>jQuery UI</option>
                <option value='standard'>unthemed</option>
            </select>
        </div>
        <div data-theme-system="bootstrap3" class='selector' style='display: none'>
            Theme Name:
            <select>
                <option value='' selected>Default</option>
                <option value='cosmo'>Cosmo</option>
                <option value='cyborg'>Cyborg</option>
                <option value='darkly'>Darkly</option>
                <option value='flatly'>Flatly</option>
                <option value='journal'>Journal</option>
                <option value='lumen'>Lumen</option>
                <option value='paper'>Paper</option>
                <option value='readable'>Readable</option>
                <option value='sandstone'>Sandstone</option>
                <option value='simplex'>Simplex</option>
                <option value='slate'>Slate</option>
                <option value='solar'>Solar</option>
                <option value='spacelab'>Spacelab</option>
                <option value='superhero'>Superhero</option>
                <option value='united'>United</option>
                <option value='yeti'>Yeti</option>
            </select>
        </div>
        <div data-theme-system="jquery-ui" class='selector' style='display: none'>
            Theme Name:
            <select>
                <option value='black-tie'>Black Tie</option>
                <option value='blitzer'>Blitzer</option>
                <option value='cupertino' selected>Cupertino</option>
                <option value='dark-hive'>Dark Hive</option>
                <option value='dot-luv'>Dot Luv</option>
                <option value='eggplant'>Eggplant</option>
                <option value='excite-bike'>Excite Bike</option>
                <option value='flick'>Flick</option>
                <option value='hot-sneaks'>Hot Sneaks</option>
                <option value='humanity'>Humanity</option>
                <option value='le-frog'>Le Frog</option>
                <option value='mint-choc'>Mint Choc</option>
                <option value='overcast'>Overcast</option>
                <option value='pepper-grinder'>Pepper Grinder</option>
                <option value='redmond'>Redmond</option>
                <option value='smoothness'>Smoothness</option>
                <option value='south-street'>South Street</option>
                <option value='start'>Start</option>
                <option value='sunny'>Sunny</option>
                <option value='swanky-purse'>Swanky Purse</option>
                <option value='trontastic'>Trontastic</option>
                <option value='ui-darkness'>UI Darkness</option>
                <option value='ui-lightness'>UI Lightness</option>
                <option value='vader'>Vader</option>
            </select>
        </div>
        <span id='loading' style='display: none'>loading theme...</span>
    </div>
    <div class='right'>
    </div>
    <div class='clear'></div>
</div>
<br />
<div class="container" style="z-index: 10; width: auto;">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div id='calendar'></div>
        </div>
    </div>
</div>
<div class="modal fade" style="z-index: 10">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <div class="error"></div>
                <form class="form-horizontal" id="crud-form">
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="title">Title</label>
                        <div class="col-md-4">
                            <input id="title" name="title" type="text" class="form-control input-md" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="time">Time</label>
                        <div class="col-md-4 input-append bootstrap-timepicker">
                            <input id="time" name="time" type="text" class="form-control input-md" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="description">Description</label>
                        <div class="col-md-4">
                            <textarea class="form-control" id="description" name="description"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="color">Color</label>
                        <div class="col-md-4">
                            <input id="color" name="color" type="text" class="form-control input-md" readonly="readonly" />
                            <span class="help-block">Click to pick a color</span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
</asp:Content>

Answer 1

我怀疑fullcalendar会在您全天全天完成1天的结束时间，因为它不需要（通过FullCalendar）。交流显然不明白。因此，也许在您通过UpdateEvent发送事件之前，您需要检查结束时间是否为null，如果是的，则将其设置为与开始日期相同。

您可能需要稍微调整此问题，如果event.end实际上不是null（也许是其他类型的"空"或无效的值，则可以检查），或者您的Exchange Server需要略有不同的值。 - 也许是第二天，或者那天23:59，或任何需要的东西。您可能还需要考虑检查allDay标志并使用/发送该标志 - 我敢肯定，Exchange具有全天的概念，但是我不知道它是否实际上有一个领域，或者只是为此默认时间（例如，当您通过Outlook创建事件时勾选"全天"框时）。

无论如何，这是一个总体想法：

function UpdateEvent(event)
{
  var data = {};
  data.id = event.id;
  data.starts = event.start;
  data.ends = (event.end != null ? event.end : event.start);
  data.subject = event.title;
  //...etc