Adam Shaw wrote an awesome full-sized JQuery plugin called FullCalendar that works hand-in-glove with ScheduleWidget. In this post, I'm going to show you how to display events from ScheduleWidget on Shaw's calendar control. Let's keep this walkthrough simple and shoot for something like this:

References

First fire up Visual Studio and create a new MVC web application. To keep it simple I used the empty project template but you can use one of the Internet/Intranet templates if you want. As with other tutorials in this series use NuGet to add ScheduleWidget to your solution. Then go to the FullCalendar web site and download the latest version (v1.5.3 as of this writing). Unzip fullcalendar-1.5.3.zip and find two files:

• fullcalendar.min.js
• fullcalendar.css

Copy the js file to your scripts folder and copy the css file to your Content folder. Add them both to your solution. Let's reference them in the _Layout.cshtml file. I'm also going to take advantage of the Microsoft CDN web site to use the latest JQuery scripts. Finally your _Layout.cshtml file should look like this:

HomeController

Add a new HomeController to the solution. FullCalendar uses Unix timestamps for its dates. So we need to be able to convert the .NET DateTime type back and forth to a Unix timestamp. So add these two methods to the controller:

private static DateTime FromUnixTimestamp(double timestamp)
{
    var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);
    return origin.AddSeconds(timestamp);
}

private static long ToUnixTimestamp(DateTime date)
{
    var ts = date.ToUniversalTime().Subtract(new DateTime(1970, 1, 1, 0, 0, 0));
    return (long)Math.Truncate(ts.TotalSeconds);
}

Pretty straightforward. A Unix timestamp is the hard-coded number of seconds since Jan 1, 1970 so the above two methods just need to cast that value appropriately. Create another private method to return a schedule of some generic event that occurs weekly every Tuesday and Thursday:

// using ScheduleWidget.Enums;
// using ScheduleWidget.ScheduledEvents;
private static Schedule BuildSchedule()
{
    var aEvent = new Event()
    {
        FrequencyTypeOptions = FrequencyTypeEnum.Weekly,
        DaysOfWeekOptions = DayOfWeekEnum.Tue | DayOfWeekEnum.Thu
    };

    return new Schedule(aEvent);
}

 What I want to demo is how FullCalendar can fetch events from our controller as a JSON feed. (See the documentation on this feature.) Basically, anytime the calendar loads or the end user refreshes the view by going to the previous or next month or week FullCalendar will make an AJAX call to a url you configure to fetch a JSON feed of event objects that it can bind to itself. You don't have to worry about start or end dates. It will figure that out for you and pass two arguments (start and end) to the url. For example:

/myfeed.php?start=1262332800&end=1265011200&_=1263178646

So we need to add a public method that FullCalendar can call to fetch events. Add this to the HomeController:

public JsonResult GetEvents(double start, double end)
{
    var list = new List<object>();
    var startHour = new TimeSpan(DateTime.Now.Hour, 0, 0);
    var endHour = new TimeSpan(DateTime.Now.Hour + 1, 0, 0);

    var range = new DateRange()
    {
        StartDateTime = FromUnixTimestamp(start),
        EndDateTime = FromUnixTimestamp(end)
    };

    var schedule = BuildSchedule();
    foreach(var date in schedule.Occurrences(range))
    {
        list.Add(new
        {
            id = 1,
            title = "Event 1",
            start = ToUnixTimestamp(date + startHour),
            end = ToUnixTimestamp(date + endHour),
            allDay = false
        });
    }

    return Json(list.ToArray(), JsonRequestBehavior.AllowGet);
}

Notice that I'm letting the MVC Framework cast the two start and end timestamps into doubles. In a real application these would help you with a database lookup. You wouldn't want to get every event out of your database and then filter them for the date range. But I'm not getting into data persistence at all in this simple demo. In the code above I'm just using the calendar's timestamps to create a DateRange that I'll pass into the Schedule. This gives us a nice short list to return back to the calendar. I'm also hard-coding each event to be a duration of one hour. Again, this is just to keep it simple. The event stored in the database would probably have some duration value stored. Let's move on to the view.

Index View

Add an Index view for the default Index action. Now we get to use JQuery to add our calendar to the view and configure the url it will call to get the JSON feed of events:

@{
    ViewBag.Title = "Index";
}

<h2>ScheduleWidget FullCalendar Demo</h2>

<div id="calendar"></div>

<script type="text/javascript">
    
    $('#calendar').fullCalendar({
        defaultView: 'month',
        events: "/Home/GetEvents"
    });

</script>

Again, see the FullCalendar documentation for all of the features available. In the code above I'm just doing the bare minimum. Go ahead and fire up the app. You should see something like the calendar pictured above. 

In this demo we returned a single Schedule. But in a real world app you'd want to return an IEnumerable<Schedule> for every event in the calendar date range. FullCalendar will dutifully take each one and display it on the correct day and hour.