Jump to content

Tutorial: HowTo create a simple Eventcalendar


Luis

Recommended Posts

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.

post-782-0-01494600-1356624995_thumb.jpg

  • Like 19
Link to comment
Share on other sites

  • 1 month later...
  • 3 weeks later...
  • 4 weeks later...

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/

  • Like 1
Link to comment
Share on other sites

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";
	}
}
  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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

post-1205-0-22080700-1367620051_thumb.jp

Link to comment
Share on other sites

@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";
	}
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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";
	}	

}
Link to comment
Share on other sites

thank you diogo

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

post-1205-0-94629100-1367929373_thumb.pn

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"); ?>
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

i try it but now have a look

post-1205-0-17109000-1368028148_thumb.pn

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 3 weeks later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...