Luis

Tutorial: HowTo create a simple Eventcalendar

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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";
	}

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

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


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

Share this post


Link to post
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";
	}	

}

Share this post


Link to post
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"); ?>

Share this post


Link to post
Share on other sites

did you include the javascript in your foot.inc ?

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

Please read carefully trough the tut.

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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..

Share this post


Link to post
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. 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By flashmaster
      Hi, i need some help with a calendar script (Full Calendar)
      Issue 1
      Its not saving to the database. This function dont work either when the script is running alone outside Processwire.
      Issue 2 (Fixed)
      When i click to ad an event and click save it wont turn up in blue, it just disapear. This function works when the script is running alone outside Processwire.
      ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
      I have attached the script running alone so you can se how it works. I have also pasted the code below that im trying to work under the template folder inside Processwire. If you can look at the code and se whats wrong with it. Im not that good at PHP or Javascript so i need you help.

      demo
      http://demos.phplift.net/jquery-fullcalendar-integration-bootstrap-php-mysql/
       
      home.php
      <?php include( "database.php" ); if ( isset( $_POST[ 'action' ] )or isset( $_GET[ 'view' ] ) ) //show all events { if ( isset( $_GET[ 'view' ] ) ) { header( 'Content-Type: application/json' ); $start = mysqli_real_escape_string( $connection, $_GET[ "start" ] ); $end = mysqli_real_escape_string( $connection, $_GET[ "end" ] ); $result = mysqli_query( $connection, "SELECT id, start ,end ,title FROM events where (date(start) >= ‘$start’ AND date(start) <= ‘$end’)" ); while ( $row = mysqli_fetch_assoc( $result ) ) { $events[] = $row; } echo json_encode( $events ); exit; } elseif ( $_POST[ 'action' ] == "add" ) // add new event section { mysqli_query( $connection, "INSERT INTO events ( title , start , end ) VALUES ( '" . mysqli_real_escape_string( $connection, $_POST[ "title" ] ) . "', '" . mysqli_real_escape_string( $connection, date( 'Y-m-d H:i:s', strtotime( $_POST[ "start" ] ) ) ) . "‘, '" . mysqli_real_escape_string( $connection, date( 'Y-m-d H:i:s', strtotime( $_POST[ "end" ] ) ) ) . "‘ )" ); header( 'Content-Type: application/json' ); echo '{"id":"' . mysqli_insert_id( $connection ) . '"}'; exit; } elseif ( $_POST[ 'action' ] == "update" ) // update event { mysqli_query( $connection, "UPDATE events set start = '" . mysqli_real_escape_string( $connection, date( 'Y-m-d H:i:s', strtotime( $_POST[ "start" ] ) ) ) . "', end = '" . mysqli_real_escape_string( $connection, date( 'Y-m-d H:i:s', strtotime( $_POST[ "end" ] ) ) ) . "' where id = '" . mysqli_real_escape_string( $connection, $_POST[ "id" ] ) . "'" ); exit; } elseif ( $_POST[ 'action' ] == "delete" ) // remove event { mysqli_query( $connection, "DELETE from events where id = '" . mysqli_real_escape_string( $connection, $_POST[ "id" ] ) . "'" ); if ( mysqli_affected_rows( $connection ) > 0 ) { echo "1"; } exit; } } ?> <!doctype html> <html lang="sv-se"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> img { border-width: 0 } * { font-family: 'Lucida Grande', sans-serif; } </style> <style type="text/css"> .block a:hover { color: silver; } .block a { color: #fff; } .block { position: fixed; background: #2184cd; padding: 20px; z-index: 1; top: 240px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="<?=$config->urls->templates;?>js/script.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="<?=$config->urls->templates;?>css/fullcalendar.css" rel="stylesheet"/> <link href="<?=$config->urls->templates;?>css/fullcalendar.print.css" rel="stylesheet" media="print"/> <script src="<?=$config->urls->templates;?>js/moment.min.js"></script> <script src="<?=$config->urls->templates;?>js/fullcalendar.js"></script> </head> <body> <div class="container">fsefsefes <div class="row"> <div id="calendar"></div> </div> </div> <!-- Modal --> <div id="createEventModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Add Event</h4> </div> <div class="modal-body"> <div class="control-group"> <label class="control-label" for="inputPatient">Event:</label> <div class="field desc"> <input class="form-control" id="title" name="title" placeholder="Event" type="text" value=""> </div> </div> <input type="hidden" id="startTime"/> <input type="hidden" id="endTime"/> <div class="control-group"> <label class="control-label" for="when">When:</label> <div class="controls controls-row" id="when" style="margin-top:5px;"> </div> </div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> <button type="submit" class="btn btn-primary" id="submitButton">Save</button> </div> </div> </div> </div> <div id="calendarModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Event Details</h4> </div> <div id="modalBody" class="modal-body"> <h4 id="modalTitle" class="modal-title"></h4> <div id="modalWhen" style="margin-top:5px;"></div> </div> <input type="hidden" id="eventID"/> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> <button type="submit" class="btn btn-danger" id="deleteButton">Delete</button> </div> </div> </div> </div> <!--Modal--> <div style='margin-left: auto;margin-right: auto;text-align: center;'> </div> </body> </html>  
      database.php (i have configure this in my file at localhost) this is just an example.
      <?php $connection = mysqli_connect('host','username','password','database') or die(mysqli_error($connection)); ?>  
      js/script.js
      $(document).ready(function(){ var calendar = $('#calendar').fullCalendar({ header:{ left: 'prev,next today', center: 'title', right: 'agendaWeek,agendaDay' }, defaultView: 'agendaWeek', editable: true, selectable: true, allDaySlot: false, events: "home.php?view=1", eventClick: function(event, jsEvent, view) { endtime = $.fullCalendar.moment(event.end).format('h:mm'); starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm'); var mywhen = starttime + ' - ' + endtime; $('#modalTitle').html(event.title); $('#modalWhen').text(mywhen); $('#eventID').val(event.id); $('#calendarModal').modal(); }, //header and other values select: function(start, end, jsEvent) { endtime = $.fullCalendar.moment(end).format('h:mm'); starttime = $.fullCalendar.moment(start).format('dddd, MMMM Do YYYY, h:mm'); var mywhen = starttime + ' - ' + endtime; start = moment(start).format(); end = moment(end).format(); $('#createEventModal #startTime').val(start); $('#createEventModal #endTime').val(end); $('#createEventModal #when').text(mywhen); $('#createEventModal').modal('toggle'); }, eventDrop: function(event, delta){ $.ajax({ url: 'home.php', data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id , type: "POST", success: function(json) { //alert(json); } }); }, eventResize: function(event) { $.ajax({ url: 'home.php', data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id, type: "POST", success: function(json) { //alert(json); } }); } }); $('#submitButton').on('click', function(e){ // We don't want this to act as a link so cancel the link action e.preventDefault(); doSubmit(); }); $('#deleteButton').on('click', function(e){ // We don't want this to act as a link so cancel the link action e.preventDefault(); doDelete(); }); function doDelete(){ $("#calendarModal").modal('hide'); var eventID = $('#eventID').val(); $.ajax({ url: 'home.php', data: 'action=delete&id='+eventID, type: "POST", success: function(json) { if(json == 1) $("#calendar").fullCalendar('removeEvents',eventID); else return false; } }); } function doSubmit(){ $("#createEventModal").modal('hide'); var title = $('#title').val(); var startTime = $('#startTime').val(); var endTime = $('#endTime').val(); $.ajax({ url: 'home.php', data: 'action=add&title='+title+'&start='+startTime+'&end='+endTime, type: "POST", success: function(json) { $("#calendar").fullCalendar('renderEvent', { id: json.id, title: title, start: startTime, end: endTime, }, true); } }); } });  
      database table
      CREATE TABLE events ( id int(11) NOT NULL AUTO_INCREMENT, start datetime DEFAULT NULL, end datetime DEFAULT NULL, title text, PRIMARY KEY (id) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;  
      fullcalendar.rar

    • By Livius
      Hello dear Processwire Users
      I am still fairly new to Process Wire and I've been looking for a Calendar solution on my Website.
      I wonder what other PCW Users use for their websites as i have found no Module for a Basic Calendar which I could use.
      I have heard that most Websites simply use the Google Calendar but i don't know if that is true.
      I thought that a solution that includes the PCW Backend would be pretty neat
      Thank you in advance!
    • By joshuag
      Introducing our newest [commercial] module:
      Recurme
      Processwire Recurring Dates Field & Custom Calendar Module.
      http://www.99lime.com/modules/recurme/
      One Field to Recur them ALL…
      A Recurring Dates InputField for your Processwire templates. The InputField you’ve been waiting for.
      Complex RRule date repeating in a simple and fast user interface.
      Use the super simple, & powerful API to output them into your templates.
      example:
      <? // easy to get recurring events $events = $recurme->find(); // events for this day $events = $recurme->day(); // events for this week $events = $recurme->week(); // events for this month $events = $recurme->month(); ?> <? // Loop through your events foreach($events as $event){ echo $event->title; echo $event->start_date; echo $event->rrule; echo $event->original->url; ... } ?> Unlimited Custom Calendars.
      Imagine you could create any calendar you wanted on your website. Use recurring events with the Recurme field, or use your own Processwire pages and date fields to render calendars… it’s up to you. Fully customizable. Make as many calendars as you like. Get events from anywhere. Recurme does all the hard date work for you.
      Unlimited Custom Admin Calendars too.
      Hope you like it  ,
       Joshua & Eduardo from 99Lime.
       





       
      ## [1.0.1] - 2017-05-29
      ### changed
      - Fixed $options[weekStartDay] offset in Calendar
      - Fixed ->renderCalendar() Blank Days
      - Fixed missing ->renderList() [renderMonth][xAfter]
      - Removed ->renderCalendar() <table> attributes border, border-spacing
      - Fixed ->renderCalendar() excluded dates
      - Fixed rrule-giu.js exclude dates
      - Fixed ->renderList missing space in attr ID
      (shout out to @Juergen for multiple suggestions & feedback).
    • By gmclelland
      I'm trying to show upcoming calendar posting pages that have an event_start_datetime and an event_end_datetime.
      The listing should show
      calendar postings greater than or equal to today (no past events unless it has an event_end_datetime that is within 3 days after today) if the calendar posting has an event_end_datetime and is within 3 days of today it should still show even though the event_start_datetime has passed. Ex. an event that spans Wed-Saturday. If today is Friday, I still want to show the event on my calendar.
      Here is the code I have tried:
      $date = date("Y-m-d");// current date $date_start = strtotime( date('Y-m-d') . " 00:00:00"); $date_end = strtotime(date("Y-m-d", strtotime($date)) . " +1 week"); $paginated_calendar_postings = $pages->get("/calendar")->children("template=calendar-posting|community-event,event_start_datetime>=$date_start, event_end_datetime<=$date_end, sort=-event_start_datetime"); But that doesn't return the correct results.
      I've spent all day searching through the forums, but couldn't find an answer.  Any help is appreciated.
      Also is there anyway to format your selector on multiple lines like this:
      $paginated_calendar_postings = $pages->get("/calendar")->children( "template=calendar-posting|community-event, event_start_datetime>=$date_start, event_end_datetime<=$date_end, sort=-event_start_datetime"); It would make it easier to read long selectors.  When I tried it, it didn't work.  I think it even gave the wrong results.
    • By SoccerGuy3
      New to ProcessWire (came over from PyroCMS) and really liking it so far. The flexibility in page building is amazing!
      Anyway, as part of the first site I am building I need an Upcoming Events list. After looking through the forums and docs, I ended up building a page with children pages where each child is a different upcoming event. Each child has title, description, start and end date fields. I have the page working and displaying everything now and am very happy! However, I have one last piece that I cannot figure out. How do I filter the events? Specifically, how do I only show upcoming events and not ones that have already ended?
      I am displaying individual events with this:
      $events = wire('pages')->get("/events/")->children("sort=event_start_date");
      $singleevent = $events->first;
      With a full list I can do a comparison in a for loop, but would prefer to just return the valid objects in the initial call.
      Basically, is there a way to add a "where" ("where event_start_date > $today") type statement?