Hi Folks,
today we will learn how to set up a simple jquery plugin called calendario and fill events trough our admin backend.
|| ATTENTION ||
Modern Browser needed
First of all, we need the jquery plugin.
Grab your copy here:
http://tympanus.net/...alendar-plugin/
Now create a new template file, lets call the file calendar.php
In the next step we have to include all the needed files from the .zip package.
You need the following .css files:
calendar.css
custom_2.css
demo.css
Just include them in the <head> </head> of your template file.
Feel free to merge them together, so you could save some http connects.
Now we need to include the needed javascript.
Make sure you have included the latest jQuery library.
Include the jquery.calendario.js and the modernizr.custom.63321.js right into the bottom of your template file.
Save the calendar.php
Now we will set up Processwire where the magic wil happen.
We just need one new template.
Create a new template called calendar.
Assign the field headline to our template.
Allow children to just use this template.
Hit the save button.
Now create a new Page as child of home and call it Calendar.
Assign our calendar template to this page.
Almost ready.
Now we have to do some little scripting in our template file calendar.php
Add this html markup to our calendar.php
<div class="custom-calendar-wrap">
<div id="custom-inner" class="custom-inner">
<div class="custom-header clearfix">
<nav>
<span id="custom-prev" class="custom-prev"></span>
<span id="custom-next" class="custom-next"></span>
</nav>
<h2 id="custom-month" class="custom-month"></h2>
<h3 id="custom-year" class="custom-year"></h3>
</div>
<div id="calendar" class="fc-calendar-container"></div>
</div>
</div>
Now we have to call the javascript function, to get the calendar running.
Just put this snippet right under the included jquery.calendario.js
<script type="text/javascript"
$(function() {
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionend',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionend',
'msTransition' : 'MSTransitionend',
'transition' : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
$wrapper = $( '#custom-inner' ),
$calendar = $( '#calendar' ),
cal = $calendar.calendario( {
onDayClick : function( $el, $contentEl, dateProperties ) {
if( $contentEl.length > 0 ) {
showEvents( $contentEl, dateProperties );
}
},
caldata : {
<?= getEvents(); ?> // this is our function to grab our events
},
displayWeekAbbr : false
} ),
$month = $( '#custom-month' ).html( cal.getMonthName() ),
$year = $( '#custom-year' ).html( cal.getYear() );
$( '#custom-next' ).on( 'click', function() {
cal.gotoNextMonth( updateMonthYear );
} );
$( '#custom-today' ).on( 'click', function() {
cal.gotoNow( updateMonthYear );
} );
$( '#custom-prev' ).on( 'click', function() {
cal.gotoPreviousMonth( updateMonthYear );
} );
function updateMonthYear() {
$month.html( cal.getMonthName() );
$year.html( cal.getYear() );
}
// just an example..
function showEvents( $contentEl, dateProperties ) {
hideEvents();
var $events = $( '<div id="custom-content-reveal" class="custom-content-reveal"><h4>Termine am ' + dateProperties.day + '. ' + dateProperties.monthname + ' ' + dateProperties.year + '</h4></div>' ),
$close = $( '<span class="custom-content-close"></span>' ).on( 'click', hideEvents );
$events.append( $contentEl.html() , $close ).insertAfter( $wrapper );
setTimeout( function() {
$events.css( 'top', '0%' );
}, 25 );
}
function hideEvents() {
var $events = $( '#custom-content-reveal' );
if( $events.length > 0 ) {
$events.css( 'top', '100%' );
Modernizr.csstransitions ? $events.on( transEndEventName, function() { $( this ).remove(); } ) : $events.remove();
}
}
});
</script>
We are almost finished, but we are missing some very essential, have a look to our javascript.
We are calling a function named getEvents()
This function will grab our events and fire it right to our calendar.
So here is the code:
function getEvents()
{
$events = wire('pages')->get("/calendar/")->children();
foreach ($events as $event)
{
echo "'$event->title' : '<span>$event->headline</span> ',";
}
}
Put this snippet above the javascript includes.
We will now create our first entry.
Go back to the PW admin backend and create a Child of Calendar.
Title and name need the Date on which the event has to be displayed.
You have to form a date in this format: mm-dd-yyyy e.g. 12-27-2012.
The headline field is our Event description.
Hit the save button, go to your site and enjoy your event calendar.
With a little coding you could extend the calendar to let it look like mine attached as screenshot.
Hope this was useful to somebody. Cheerio.