Calendario: A Flexible Calendar Plugin

A jQuery calendar plugin for creating flexible calendars.

Calendario: A Flexible Calendar Plugin

View demo Download source

Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. We’ve created a jQuery plugin for the calendar itself and you can see some examples of how to use it in the demos. The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens we want to show a grid-based layout while on smaller screens, we want to simply stack the days of the month.

Please note that the demos will only work as intended in browsers that support the new CSS properties used here, especially calc().

The calendar designs are based on these two beauties found on Dribbble:

For the calendar plugin to work, we simply need a container with the class “fc-calendar-container”:

<div id="calendar" class="fc-calendar-container"></div>

The plugin can be called like this:

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

The plugin will create a calendar with the following structure:

<div id="calendar" class="fc-calendar-container">
   <div class="fc-calendar fc-five-rows">
	  <div class="fc-head">
		 <div>Monday</div>
		 <div>Tuesday</div>
		 <div>Wednesday</div>
		 <div>Thursday</div>
		 <div>Friday</div>
		 <div>Saturday</div>
		 <div>Sunday</div>
	  </div>
	  <div class="fc-body">
		 <div class="fc-row">
			<div></div>
			<div></div>
			<div></div>
			<div><span class="fc-date">1</span><span class="fc-weekday">Thu</span></div>
			<div><span class="fc-date">2</span><span class="fc-weekday">Fri</span></div>
			<div><span class="fc-date">3</span><span class="fc-weekday">Sat</span></div>
			<div><span class="fc-date">4</span><span class="fc-weekday">Sun</span></div>
		 </div>
		 <div class="fc-row">
			<!-- ... -->
		 </div>
		 <div class="fc-row">
			<!-- ... -->
		 </div>
		 <div class="fc-row">
			<!-- ... -->
		 </div>
		 <!-- ... -->
	  </div>
   </div>
</div>

The calendar will consist of a head for the listing of the weekdays and a body with rows for the days of the month. Each “cell” will contain the date and weekday (if applicable) and we control the height of the rows by setting the right class to the container (four, five or six rows). The styling for the default calendar is defined in calendar.css.
Note that a cell that contains some content/event will look as follows:

<div class="fc-content">
   	<span class="fc-date">14</span>
  	<span class="fc-weekday">Wed</span>
   	<div>
		<!-- Some event/content -->
	</div>
</div>

Note that the weekday of each cell is hidden by default because we have the calendar head with the weekdays. The ones in the cell are especially for the case when we apply media queries to reset the layout of the calendar to be stacked vertically. Here we will want to show the weekdays for each day.

It’s clear that a calendar could/should be represented by a table, but due to some table rendering differences between the browsers (especially IE9), we chose not to use it. You can of course adjust the plugin to output a table, though.

The important part of making the calendar grid fluid is the styling of the row and the div (or the “cell”):

.fc-four-rows .fc-row  {
	height: 25%;
}

.fc-five-rows .fc-row  {
	height: 20%;
}

.fc-six-rows .fc-row {
	height: 16.66%;
	height: -moz-calc(100%/6);
	height: -webkit-calc(100%/6);
	height: calc(100%/6);
}

.fc-calendar .fc-row > div,
.fc-calendar .fc-head > div {
	float: left;
	height: 100%;
	width:  14.28%; /* 100% / 7 */
	width: -moz-calc(100%/7);
	width: -webkit-calc(100%/7);
	width: calc(100%/7);
	position: relative;
}

So, we define different heights depending on the amount of rows we’ll have, using calc() where we know that the result is not a round number. For the inner div we will set the width to be 100 divided by 7.

Options

The following (default) options are available:

// initialize calendar with this month (1-12). Default is today
month : null,

// initialize calendar with this year. Default is today
year : null,

// initial data/content for the calendar
// format:
// {
//		'MM-DD-YYYY' : 'HTML Content',
//		'MM-DD-YYYY' : 'HTML Content',
//		'MM-DD-YYYY' : 'HTML Content'
//		...
//	}
caldata : null,
weeks : [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
weekabbrs : [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
months : [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
monthabbrs : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],

// choose between values in options.weeks or options.weekabbrs
displayWeekAbbr : false,

// choose between values in options.months or options.monthabbrs
displayMonthAbbr : false,

// left-most day in the calendar
// 0 - Sunday, 1 - Monday, ... , 6 - Saturday
startIn : 1,

// callback function for when clicking on a day cell in the calendar
// $el is the cell
// $content is the content division of the cell
// dateProperties is an object with the following properties:
// day : day number,
// month : month number from 1 - 12,
// monthname : name from options.months,
// year : year number,
// weekday : week number from 0 - 6,
// weekdayname : name from options.weeks
onDayClick : function( $el, $content, dateProperties ) { return false; }

The following public methods are available:

// return the year that is currently being viewed
getYear()

// return the month that is currently being viewed (1-12)
getMonth()

// returns the name of the month that is currently being viewed
getMonthName()

// returns the content division inside the cell associated to day "day"
getCell( day )

// sets the data to the calendar. Merges the contents of the passed caldata with the one already set (if any)
setData( caldata )

// shows the calendar for today's month and year
// month is from 1-12
gotoNow( callback )

// shows the calendar for month "month" and year "year"
// month is from 1-12
goto( month, year, callback )

// goes back one month in the calendar
gotoPreviousMonth( callback )

// goes back one year in the calendar
gotoPreviousYear( callback )

// goes further one month in the calendar
gotoNextMonth( callback )

// goes further one year in the calendar
gotoNextYear( callback )

You can use setData to add content to the calendar. You can see examples for that in the demo files.

The basic styling is defined in the calendar.css file and you can see examples of how to modify the calendar style and add to it in the custom CSS files.

Demos

Check out the demos:

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 115

Comments are closed.
  1. 1

    Wonderful plugin, Nice to use for a booking component for example. Keep up the good work.

  2. 2

    Hi! I love this design..but i have a question.
    When i load the html/css/js, the calendar only loads dates from monday-saturday, do you know why? Also, the widget that makes the event pop up on January 1st, does not work.
    Also is there a way to resize the entire calendar?
    Thanks!

  3. 3

    If I have few events in the same day like:
    var codropsEvents = {
    ’01-02-2013′ : ‘ev1′,
    ’01-02-2013’ : ‘ev2’
    };

    it`s just showing me the last one, how could i fix this?

    Beside this minor thing it`s a great plugin to use!

  4. 8

    If the cells can’t expand to fit the necessary data (say, three events in one day), it’s not much use…

    • 9

      I was wondering exactly the same thing, isn’t there a workaround to make the rows expand to fit the necessary data?

      Since I removed the “white-space: nowrap” line to show the full events, I would like the rows to expand to fit the events. I tried a lot of different things in the css file, but nothing seems to work.

  5. 10

    Hey its awesome calendar i have ever seen. I’m in big mess. In your example you put all events in javascript file “data.js”. Here I’m loading data from database using jsp page and set jsp page to contentType="text/javascript" but its not working. Need your help ASAP

    • 11

      Sorry It was my mistake in placing date format like 15-02-2013 but the actual format id 02-14-2013

  6. 13

    Hi there!
    any idea to show events on hover only ??
    Looking forward to reading you or I’ll edit your plugin otherwise…

  7. 14

    It’s okay!
    I did it using this snippet

    $('.fc-date').hover(function () {
    $(this).parents('.fc-content').find('div').show();
    //alert($(this).parents('.fc-row').html());
    }, function () {
    //
    $(this).parents('.fc-content').find('div').hide();
    });

  8. 16

    Okay, I’m not trying to be an idiot (sometimes, it just comes naturally!), but where do the details for the events go so they show up in the day “cell”? When I use the code provided, it shows up at the bottom, below the calendar. I’m using DEMO 2 and have adjusted color to fit our site scheme. Everything works great and it’s PERFECT except for this! Kind of like having a beautiful, empty vase! I need some flowers ya’ll! Please help! Thanks!

  9. 18

    Very nice, as usual!
    Does anybody found out to make it work on Internet Explorer 10?

  10. 19

    Hi,

    This is an excellent looking calendar, thanks for putting it together. I need to feed my event data through from a url query string. Could you give me any pointers on the best way to create an array of event data that the calendar will accept? I know how to strip the data from the query string but the calendar breaks if I try and pass this array to caldata.

    Thanks,

    Sean

  11. 20

    It is possible to create two are more events for the same date?

    I tried this:

    ’04-12-2013′ : ‘Event1′,
    ’04-12-2013’ : ‘Event2’

    The plugin take only the last date. So, I can see Event2 but not Event1.

  12. 22

    Hm I am trying to figure out how to add one more variable to data.js, such as

    ’04-12-2013? : ‘Event1?:’category’,

    and how to extract this third variable ? I am going through calendario.js file but having hard time to figure out how is he extracting date and event description, what part of code is it, what line number ?

    Thanks!

    • 23

      I’m trying to do exactly the same thing, and I didn’t find how to do that either…
      If anyone as an idea… ? Thanks !

    • 24

      I find a solution to my problem : I’ve put a css class like this :
      ’04-28-2013′ : ‘category text link and so on…’,

      and I just make a function like this (I wanted to change the background color of the cell) :
      function colorCalendar(){
      $(“#calendrier”).find(“.category”).parent().parent().css(“background-color”,”#276983″);
      }

      I call it when document load and when you click on next/prev buttons.

      Hope it will help !
      Thank you for this great plugin !

  13. 25

    I am trying to make the calendar dynamic with php, which means editing the data.js file. I can’t seem to find where it is referenced in the code. Any ideas? Thanks!

  14. 26

    Great calendar!
    How to convert writing order date?
    It is mm-dd-yyyy, I would like to be yyyy-mm-ddd.

    • 27

      Ok, missed it by changing the record date for the data file: D

      How to rebuild the calendar to recognize the script … record and display all records from the day one after the other?

      ’04-22-2013 ‘,’ text3 text3 text3 ‘
      ’04-22-2013 ‘,’ text2 text2 text2 ‘
      ’04-22-2013 ‘,’ text text text ‘,

  15. 28

    Hi Mary Lou,
    I love you calendars. I would like to incorporate it into my new site. I would like the calendar to read from a mysql database, but I am not sure on how to go about adding this as I am just learning. How would I add the info from the database to the data.js file? Also where would I add code so when I click on a day I can add a new event and when I click on an event how can I add the effect of demo 2? I know I am asking a lot but I really want to add the calendar to my site.

    Thanks in advance

    Roland

  16. 29

    Best calendar around, great design.

    What has to be done to have 2 calendars on the same page?

    Thanks greatly.

    • 30

      I managed to do this by creating another data file “data1.js” and change the variable to ‘codropsEvents1’

      duplicate the inline js and container html in the example and change all the div ids . . . i added ‘1’ to them, and make sure corresponding div id’s are matching.

      also change source data “caldata : codropsEvents1,”

      cheers all.

Comments are closed.