FullCalendar.io - all day event update - fullcalendar

Question

Trying to figure out exactly how I can through my code behind convert an appointment from time ranged to all day using JQuery FullCalendar. What I get when making the appointment dragged into allday slot is an error that the end time is null. Has anyone had success getting this to work? I am using EWS to update the Exchange calendar on the server. That part works well, I just need a little clarification on how to change time range to all day. Thanks!
<%# 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>

Answer 1

I suspect that fullCalendar drops the end time when you make it all-day for 1 single day, because it's not needed (by fullCalendar). Exchange clearly doesn't understand that. So perhaps before you send the event via UpdateEvent you need to check whether the end time is null, and if so then set it to be the same as the start date.
You may need to adjust this slightly, either if event.end is not literally null (perhaps it's some other kind of "empty" or invalid value, you can check), or if your Exchange server needs a slightly different value for the end - perhaps the day after, or 23:59 that day, or whatever it needs. You may want to consider checking the allDay flag as well and using/sending that - I'm pretty sure Exchange has the concept of all-day, but I don't know if it actually has a field for it, or just that to default the times (e.g. when you tick the "All Day" box when creating an event via Outlook).
Anyway here's the general idea:
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