Tutorial: HowTo create a simple Eventcalendar

Luis · December 27, 2012

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.

Vineet Sawant · February 23, 2013

Thanks for this tutorial. Very helpful for my project.

Basil · March 12, 2013

Hi Luis very nice tutorial!!! can you help me with this?

http://processwire.com/talk/topic/3032-photo-gallery-site/

thank you!

Beluga · April 4, 2013

Thanks for this.

In the comments of the Calendario article there is this:

If you would like to display multiple events at the same date, let’s say:

’01-01-2013′ : ‘New Year’s Day‘,
’01-01-2013′ : ‘Christmas holidays‘

You should simply put one event after another like this:

’01-01-2013′ : ‘New Year’s Day Christmas holidays‘

Calendario will then display them as two events on the same date

If we were to use a different field than 'title' for the date so we could have multiple events for the same day, how can we check for the same date and join those event titles/descs? Or would it be wiser to integrate a more complete solution like http://arshaw.com/fullcalendar/

Btw. fullCalendar supports event descriptions as well: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

Luis · April 4, 2013

Code example tomorrow, just arrived at home, le me now @ couch

Luis · April 5, 2013

To add various events on the same day via Processwire and stored pages we have to edit our existing getEvents() function and we have to change the way we store events.

According to my first example we stored events like this:

Children of /calendar/ with date and event entry as our single calendar event.

Now we change this way a little bit.

We create calendar events by date and add children to this day.

Something like this:

/calendar/01-01-1970/deployunix6/

/calendar/ -> is our events container

/01-01-1970/ -> is our day container

/deployunix6/ -> one event at the 01-01-1970

This way we could avoid redundant information in our pagetree and easily maintain our calendar.

In the next step we edit our getEvents() function.

function getEvents(){

	$days = wire('pages')->get("/calendar/")->children("sort=title");
	
	foreach ($days as $day)
	{
		echo "'$day->title' : '";
		$events = $day->children("sort=created");
		foreach ($events as $event)
		{
			echo "<span><p>$event->title</p></span>";	
		}
		echo "', \n";
	}
}

Beluga · April 5, 2013

Great solution, Luis! Thanks.

Pitbull · May 3, 2013

hi Luis

thank you for the tutorial, can you please post the way you did yours in photo, or the code you use? i try it with the tut example i see the calendar but no event is shown, i try it in the main instal of processwire, i cant post a link because i try it on localhost, so it will be perfect for me if you show me how you did it.

what i need for my first website is a calendar that post events..

thank you in advance!!

please see image attached to see the problem i have

onjegolders · May 4, 2013

Thanks Luis, this is a really helpful tutorial.

I did have an issue with an unexpected token but by piecing your code together with some from the plugin docs I managed to get it working.

Luis · May 6, 2013

@Pitbull:

could you please try this snippet:


	foreach ($days as $day)
	{
		echo "'$day->title' : '";
                echo "<span><p>";
		$events = $day->children("sort=created");
		foreach ($events as $event)
		{
			echo $event->title' ';	
		}
                echo "</p></span>";
		echo "', \n";
	}

Pitbull · May 6, 2013

hi Luis thank you for help..

i try your code but iget this error

Parse Error: syntax error, unexpected ''" ''
(T_CONSTANT_ENCAPSED_STRING), expecting ',' or ';' (line 21 of
C:\wamp\www\processwireeeeeeeee\site\templates\calendar.php)

this is my page:

<?php 
include("./head.inc"); 
?>
<?php
	foreach ($days as $day)
	{
		echo "'$day->title' : '";
                echo "<span><p>";
		$events = $day->children("sort=created");
		foreach ($events as $event)
		{
			echo $event->title' ';	
		}
                echo "</p></span>";
		echo "', \n";
	}
?>
<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>
<?php
include("./foot.inc"); ?>

i dont know wats wrong?

diogo · May 6, 2013

echo $event->title' '; // <-- here's the problem

echo $event->title . ' '; // <-- maybe this was the intention?

Luis · May 7, 2013

Sorry Pitbull,

wrote the snippet on my Phone.

The snippet I posted has to be placed inside the getEvents() function.

So change your code to this and send me feedback if its working:

function getEvents(){

	$days = wire('pages')->get("/calendar/")->children("sort=title");
	foreach ($days as $day)
	{
		echo "'$day->title' : '";
                echo "<span><p>";
		$events = $day->children("sort=created");
		foreach ($events as $event)
		{
			echo $event->title.' ';	
		}
                echo "</p></span>";
		echo "', \n";
	}	

}

Pitbull · May 7, 2013

thank you diogo

Hi Luis thank you for your help, i dont make it work the problem is this:

the calendar.php is

<?php 
include("./head.inc"); 
?>

<?php
function getEvents()
{	
	$days = wire('pages')->get("/calendar/")->children("sort=title");
	foreach ($days as $day)
	{
		echo "'$day->title' : '";
                echo "<span><p>";
		$events = $day->children("sort=created");
		foreach ($events as $event)
		{
			echo $event->title.' ';	
		}
                echo "</p></span>";
		echo "', \n";
	}	

}
?>

<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>

<?php
include("./foot.inc"); ?>

Luis · May 7, 2013

did you include the javascript in your foot.inc ?

Pitbull · May 7, 2013

included in head.inc

<script type="text/javascript" src="<?php echo $config->urls->templates?>calendario/js/modernizr.custom.63321.js"></script>		
<script type="text/javascript" src="<?php echo $config->urls->templates?>calendario/js/jquery.calendario.js"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>calendario/js/data.js"></script>
		<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 : codropsEvents,
						displayWeekAbbr : true
					} ),
					$month = $( '#custom-month' ).html( cal.getMonthName() ),
					$year = $( '#custom-year' ).html( cal.getYear() );

				$( '#custom-next' ).on( 'click', function() {
					cal.gotoNextMonth( 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>Events for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + 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>

Luis · May 8, 2013

Please read carefully trough the tut.

The JavaScript to call the Calendar has to be placed under the getEvents() function.

Pitbull · May 8, 2013

i folow step by step but no luck my files are

head.zip

i cant make it work can you see what i did false

thank you Louis and i wiss you get the help you give me when you need it..

Luis · May 8, 2013

open your foot.inc and compare line 91 with the posted javaScript in my tutorial. (hint: it has to do with getEvents() )

Pitbull · May 8, 2013

i try it but now have a look

Louis if not so much to ask if you please to post your calendar from (image in your post up) related files (foot head calendar or any other you use to make it) here to see how to make mine work, so i dont waste your time anymore..

thank you and i am sory to bother you..

Luis · May 10, 2013

Hey Pitbull,

my files won´t help you on this issue.

The calendar picture I´ve posted above shows the integration in one of my apps. It generates his entries from various pages, so posting the code will even more confuse you.

Let´s try to find a solution for your problem.

On the very first, delete all calendar related code from your template.

Now, include the appropriate css files and jquery in your head.inc.

Put the HTML code inside your calendar.php and throw the getEvens() function under the html.

After finishing this step, put the JavaScript function under the php part, within the calendar.php.

Pitbull · May 10, 2013

Luis thank you!! i finaly got it i am sory to bother you so much.. one help advice how to output more info about event ( image map links ) any idea?

Luis · May 11, 2013

Mhhhhh this calendar is only able to visualize a textlink. I don't know if the JaveScript is flexible enough to suit your needs on this.

I will take a look the next days, ok?

Pitbull · May 11, 2013

thank you Luis, i wait for your magic..

Roland · May 27, 2013

Hi Luis,

I am trying to incorporate this calander into a new site I am creating. I have been having problems trying to get events from my database into the calander, that's when I stumbled upon your tutorial. Let me state that I am not using Processwire. I have a php page and I am connecting to a mysql database.

I followed your tutorial and have added all the files and updated the script to add getEvents() function. Here is my part of my code with the getEvents function.

mysql_select_db($database_rsCalData, $rsCalData);
$query_rsgetevents = "SELECT * FROM calendar_events";
$rsgetevents = mysql_query($query_rsgetevents, $rsCalData) or die(mysql_error());
$row_rsgetevents = mysql_fetch_assoc($rsgetevents);
$totalRows_rsgetevents = mysql_num_rows($rsgetevents);

function getEvents() {
	$i=0;
	while ($i< $totalRows_rsgetevents) {

		$month=mysql_result($rsgetevents,$i,"event_month");
			if(strlen($month) < 2) { // this is incase only 1 digit was enter e.g. month 5 instead of 05
				$month = "0" . $month; 
			}
			
		$day=mysql_result($rsgetevents,$i,"event_day");
			if(strlen($day) < 2) {
				$day = "0" . $day;
			}
		
		$year=mysql_result($rsgetevents,$i,"event_year");
		$title=mysql_result($rsgetevents,$i,"event_title");
		
		if ($i < $totalRows_rsgetevents -1) {
			echo "'$month-$day-$year' : '$title'";
		} else {
			echo "'$month-$day-$year' : '$title'";
		}
		
		$i++;
	}
}
?>

Right now I only have one record in my database. When I load the page my calander is blank.

I commented out the following lines

//function getEvents() {

and the final bracket of the function //}

So all I had was the while loop. When I reloaded the page my database data was echoed on the page. So I uncommented the two lines of the function and added the following code to the bottom of the getEvents function.

        $month="5";
	if(strlen($month) < 2) {
			$month = "0" . $month;}
	$day="1";
	if(strlen($day) < 2) {
			$day = "0" . $day;}
	$year="2013";
	$title="Another Small Test ";
	$dmy ="$month - $day - $year";
	echo "'$month-$day-$year' : '$title'";

I reloaded the page and the above data the "Another Small Test " was added to my calander on the 1st of May 2013 but my database data was not added. So I added some code and compared what was coming from my database and what I just entered above. I reloaded the page and they compare the same.

I am at a loss as to why my data does not get posted to the calander when it is in the correct format, as far a I can assume. Any help would be greatly appreciated.

Thanks Roland

Sign In

Tutorial: HowTo create a simple Eventcalendar

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content