fullcalendar

HTML

<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="http://www.arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>

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

CSS

.fc-event-width-overirde {
  width: 50px !important;
}

.fc-today {
  width: 200px !important;
}


/*.fc-today-override {width: 200px !important;}*/

JavaScript

$(document).ready(function () {
    /* initialize the external events
     -----------------------------------------------------------------*/

    var todayDate = moment().startOf('day');
    var YM = todayDate.format('YYYY-MM');
    var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
    var TODAY = todayDate.format('YYYY-MM-DD');
    var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');

    $('#calendar').fullCalendar({
        defaultView: "agendaWeek",
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        navLinks: true,
        events: [
            {
                title: 'All Day Event',
                start: YM + '-01',
                allDay: false
            },
            {
                title: 'Long Event',
                start: YM + '-07',
                end: YM + '-10',
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: YM + '-09T16:00:00',
                allDay: false
            },
           
            {
                title: 'Meeting',
                start: TODAY + 'T10:30:00',
                end: TODAY + 'T12:30:00',
                allDay: false
            }
        ]
    });

});