Using FullCalendar in an MVC ASP.Net Web Application

Recently I was creating a site that needed an interactive calendar for events.  A quick google search turned up a nice Javascript based (Jquery) calendar I could use for free.  The product is Full Calendar .  I wanted to write a quick article about what is required to get it up and running in a site.  

The first thing to do is download the latest version from their site.  I downloaded 2.6.1 at the time.  Once downloaded, extract it to a folder on your machine.  Now I am using visual studios to make an MVC app.  So what I did was create a directory in my solution called calendar and copied the following elements into the directory.  
  • fullcalendar.min.css
  • fullcalendar.min.js
  • fullcalendar.print.css (if you want print rendering)
  • jquery-ui.custom.min.js (if you don't have it included in project elsewhere)
  • moment.min.js (not sure if needed)
I already was using Jquery in my project, so this was sufficient to get me rolling.

Now I included links in my header on my page.

    @Styles.Render("~/calendar/fullcalendar.min.css")
    @Scripts.Render("~/calendar/moment.min.js")
    @Scripts.Render("~/calendar/fullcalendar.min.js")

The next thing I did was add a div tag that will be the calendar, and a short script to get it rolling.
<div id="calendar" style="width:95%"></div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $('#calendar').fullCalendar({
                                header: {
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'month,agendaWeek,agendaDay'
                                },
                                editable: false,
                                eventLimit: true, // allow "more" link when too many events
                                events: @(Html.Raw(Model.Body))
                            });
	                    });
                    </script>
Now that I have that in place, the calendar should render.

You will now note that it didn't quite work because in the javascript function, I referenced Model.Body which you probably didn't have.  So this is how I add events to the calendar.  How my app works, is I store the events in a json file on my server to be rendered out.  When the Model for the page loads, it has that JSON stored in a string on the Model called Body, so the HTML.Raw renders it out to the javascript and it works slick.

The JSON is simple, it only has 3 attributes per Event in an array, so looks like the following.

[
  {
    "title": "All Day Event",
    "start": "2016-01-01"
  },
  {
    "title": "Long Event",
    "start": "2016-01-07",
    "end": "2016-01-10"
  }
]
What I did was create a class that represents this.

[Serializable]
    public class Event
    {
        public string title { get; set; }
        public DateTime start { get; set; }
        public DateTime end { get; set; }
    }
Then I leverage the Newtonsoft Serializer to convert between a List<Event> and the json quickly for saving and for editing using models.  Perhaps I will have an article on the add event function another day.  For now, a quick example of that read to and from JSON to end the day.

var list = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Models.Event>>(content.Body);
            if (list == null)
                list = new List<Models.Event>();
            list.Add(new Models.Event() { title=Title, end = Convert.ToDateTime(EndDate), start = Convert.ToDateTime(StartDate) });
            content.Body = Newtonsoft.Json.JsonConvert.SerializeObject(list);

Add comment