I see it move in the full calendar but the web method is not being called. I set a breakpoint in the code behind just to determine if anything is happening and nothing. I have tried stepping through the js part and the ajax style call. My values are not empty so I really am not sure what is wrong. I would expect that putting a breakpoint in the code behind means if the method fires it would pause at the breakpoint but it isn't. So here is the complete source code aspx and aspx.cs pages.
default.aspx
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="FullCalJQuery._Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<meta charset='utf-8' />
<link href='Scripts/fullcalendar/fullcalendar.min.css' rel='stylesheet' />
<link href='Scripts/fullcalendar/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='Scripts/fullcalendar/moment.min.js'></script>
<script src='Scripts/fullcalendar/jquery.min.js'></script>
<script src='Scripts/fullcalendar/jquery-ui.min.js'></script>
<script src='Scripts/fullcalendar/fullcalendar.min.js'></script>
<script src='Scripts/fullcalendar/theme-chooser.js'></script>
<script>
$(document).ready(function () {
initThemeChooser({
init: function (themeSystem) {
var id = null;
var title = null;
var starts = null;
var ends = null;
$('#calendar').fullCalendar({
themeSystem: themeSystem,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: <%=JsonEvent %>,
eventDrop: function(event, delta, revertFunc) {
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
else {
id = event.id;
title = event.title;
starts = event.start;
ends = event.end;
$.ajax({
type: "POST",
url: "Default.aspx/btnSample_Click",
data: '{RecID: "' +id '",'+'EvtTitle:"'+title+ '",'+ 'Starts:"'+starts+ '",'+'Ends:"'+ends+ '"' + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response){
alert(response.d);
}
});
}
function OnSuccess(response){
alert(response.d);
alert("success");
}
}
});
},
change: function (themeSystem) {
$('#calendar').fullCalendar('option', 'themeSystem', themeSystem);
}
});
});
</script>
<style>
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;
}
</style>
<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>
<div id='calendar'>
</div>
<input type="submit" id="bntSample" runat="server" style="display: none" onclick="btnSample" />
</asp:Content>
default.aspx.cs
using FullCalJQuery.App_Code;
using Microsoft.Exchange.WebServices.Data;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web.Script.Serialization;
using System.Web.Services;
using System.Web.UI;
namespace FullCalJQuery
{
public partial class _Default : Page
{
public string JsonEvent { get; set; }
public string ApptDetails { get; set; }
public ExchangeService Service
{
get
{
ExchangeService service = new ExchangeService(ExchangeVersion.Exchange2013_SP1);
service.Credentials = new WebCredentials("*****************", "*****************");
service.AutodiscoverUrl("*****************");
service.Url = new Uri("*****************");
return service;
}
}
protected DateTime GetFirstDayOfCurrentMonth()
{
DateTime firstDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
return firstDate;
}
protected DateTime GetFirstDayOfNextMonth()
{
int monthNumber, yearNumber;
if (DateTime.Now.Month == 12)
{
monthNumber = 1;
yearNumber = DateTime.Now.Year + 1;
}
else
{
monthNumber = DateTime.Now.Month + 1;
yearNumber = DateTime.Now.Year;
}
DateTime lastDate = new DateTime(yearNumber, monthNumber, 1);
return lastDate;
}
private CalendarFolder FindDefaultCalendarFolder()
{
return CalendarFolder.Bind(Service, WellKnownFolderName.Calendar, new PropertySet());
}
private CalendarFolder FindNamedCalendarFolder(string name)
{
FolderView view = new FolderView(100);
view.PropertySet = new PropertySet(BasePropertySet.IdOnly);
view.PropertySet.Add(FolderSchema.DisplayName);
view.Traversal = FolderTraversal.Deep;
SearchFilter sfSearchFilter = new SearchFilter.IsEqualTo(FolderSchema.FolderClass, "IPF.Appointment");
FindFoldersResults findFolderResults = Service.FindFolders(WellKnownFolderName.Root, sfSearchFilter, view);
return findFolderResults.Where(f => f.DisplayName == name).Cast<CalendarFolder>().FirstOrDefault();
}
protected void Page_Load(object sender, EventArgs e)
{
DateTime startDate = GetFirstDayOfCurrentMonth();
DateTime endDate = GetFirstDayOfNextMonth();
CalendarFolder calendar = FindDefaultCalendarFolder();
CalendarView cView = new CalendarView(startDate, endDate, 100);
cView.PropertySet = new PropertySet(AppointmentSchema.Subject, AppointmentSchema.Start, AppointmentSchema.End, AppointmentSchema.Id);
FindItemsResults<Appointment> appointments = calendar.FindAppointments(cView);
List<FullCalendarEvent> CalendarEvents = new List<FullCalendarEvent>();
foreach (Appointment ap in appointments)
{
CalendarEvents.Add(
new FullCalendarEvent()
{
id = ap.Id.ToString(),
start = ap.Start.ToString("o"),
end = ap.Start.ToString("o"),
title = ap.Subject
});
}
////Format the JSON events according to Full Calendar Specs and insert the JSON obejct into the DOM
JsonEvent = new JavaScriptSerializer().Serialize(CalendarEvents);
}
[WebMethod]
protected void btnSample_Click(string RecID, string EvtTitle, string starts, string ends)
{
ExchangeService Service = new ExchangeService();
Appointment appointment = Appointment.Bind(Service, new ItemId(RecID.ToString()));
appointment.Subject = EvtTitle.ToString();
appointment.Start = Convert.ToDateTime(starts.ToString());
appointment.End = Convert.ToDateTime(ends.ToString());
appointment.StartTimeZone = TimeZoneInfo.Local;
appointment.EndTimeZone = TimeZoneInfo.Local;
appointment.Update(ConflictResolutionMode.AutoResolve);
System.Web.HttpContext.Current.Response.Write("Code Behind Reached!");
}
}
What I ended up doing with perseverance and a lot of Google searches is this:
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);
}
});