enkidu

You've been pulled into an impromptu meeting where the client now wants a web calendar tacked onto their application. Grimace. Walk out worried. But most important ...

Don't re-invent the wheel.

FullCalendar.js has most of what's required by default, is extensible and will take a json web feed. Given a list of hash refs, Mojolicious will spit out json. I'll show you a short template for displaying the calendar. Creating all your calendar appointments in json is left as an exercise for the reader.

Put the following routes in the startup method of your application to a new template called fullcalendar.html.ep in the templates/application directory. You're responsible for creating the json_events method in your Controller.

$r->get('/calendar/:user')->to('application#fullcalendar');
$r->get('/json/:user')->to('Controller#json_calendar');

Create a public/fullcalendar directory and download the JavaScript and CSS files into it. Here is fullcalendar.html.ep

% layout 'default';
% title 'Web Calendar';
%= stylesheet '/fullcalendar/fullcalendar.min.css'
%= stylesheet '/fullcalendar/fullcalendar.print.css',	media => 'print'
%= javascript '/fullcalendar/fullcalendar.min.js'

%= javascript begin

    $(document).ready(function() {

        $('#calendar').fullCalendar({

               header: {

			left: 'prev,next today',

			center: 'title',

			right: 'month,agendaWeek,agendaDay'

		},

		defaultView: 'agendaWeek',

		events: '/json/<%= $user %>',

		eventClick: function(calEvent, jsEvent, view) {

			var event = calEvent.title + "\n"

				+ 'Location: ' + calEvent.location + "\n"

				+ 'Description: ' + calEvent.description;

			alert(event);

		},

        });

    });

% end

%= stylesheet begin

    #calendar {

        max-width: 800px;

        margin: 0 auto;

    }

% end

<h1>Calendar for  <%= $user %> </h1>

Add your pre-amble



    <div id='calendar'></div>



and some post-amble

You can get just the defaults with

 $('#calendar').fullCalendar(); 

or
add in more attributes in the fullCalendar body to change locale and date formats and style the calendar to fit your page and site branding. Tell people you're still working on the latest unreasonable demand for the rest of the week while you're really adding tests to your application so that your time off really is time off.

Any improvements? Found an error? Re-invented a better wheel? Let us know in the comments.