­
­
­
­

Responsive Calender

Home » Responsive Calender

How to use Rsponsive Calender and implemention

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>

Try another Demo Full Screen Calender

Go to Demo 2