尝试通过我的代码确切地弄清楚如何使用JQuery FullCalendar将约会从时间范围转换为全天。将约会拖入allday槽时我得到的结果是结束时间为空的错误。是否有人成功实现这一目标？我正在使用EWS更新服务器上的Exchange日历。这部分效果很好，我只需要稍微澄清一下如何将时间范围改为一整天。谢谢！
<%@ 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">×</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>
答案 0 :(得分：0)
我怀疑fullCalendar会在一天中全天播放结束时间，因为它不需要（通过fullCalendar）。交换显然不明白。因此，在您通过UpdateEvent发送事件之前，您需要检查结束时间是否为空，如果是，则将其设置为与开始日期相同。
如果event.end不是字面上的空（可能是其他类型的“空”或无效值，您可以检查），或者您的Exchange服务器需要稍微不同，您可能需要稍微调整一下结束的价值 - 也许是那天之后，或当天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