Display a list calendar using a date field

antknight · March 8, 2013

Renobird built this lovely calendar here. Is there a way to do this just using a date field? Is it possible to extract just the month from a date for example and foreach it?

apeisa · March 8, 2013

That is prettiest and probably most easy to use/browse calendar in long time. Reno is my designer hero for sure!

renobird · March 9, 2013

Thanks guys, you are too kind.

That calendar was done with Textpattern, but I built a proof-of-concept of essentially the same thing using Processwire.

Ryan gave me some huge clues on using JSON. I'll post it when I'm back at the office next week.

Soma · March 9, 2013

Renobird built this lovely calendar here. Is there a way to do this just using a date field? Is it possible to extract just the month from a date for example and foreach it?

You can extract the month of a date with

$month = date("m",$page->date); // 03
$month = date("n",$page->date); // 3

But not sure what you're looking for. Foreach it?

renobird · March 11, 2013

OK, it's been a while since I looked at this, and much of it was inspired or guided by Ryan.

I had to boil it down a little to make it generic enough to make sense, so this exact code hasn't been tested, but it should get you started.

Here's a proof of concept that works.

Template for your calendar page

<?php 

function pagesToJSON(PageArray $events) {
    $json = array();
    foreach($events as $event) {
        $json[] = pageToArray($event); 
    }
    return json_encode($json); 
}

function pageToArray(Page $event) {
    $data = array(
        'id' => $event->id,
        'title' => $event->title,
        'start' => date("Y-m-d H:i:s",$event->start_date),
        'end' => date("Y-m-d H:i:s",$event->end_date),
        'url' => "./$event->id", // event ID is the url segment
    );
  return $data;
}

if($input->urlSegment1) {
    // event ID provided as a URL segment to this page
    $event = $pages->get("id=$input->urlSegment1");
    include("./includes/head.inc"); 
    echo $event->title;
    echo $event->body;
    include("./includes/footer.inc"); 

} else if($config->ajax && $input->get->start && $input->get->end) {
    // fullCalendar making an ajax request of events
    $start = (int) $input->get->start;
    $end = (int) $input->get->end; 
    $events = $pages->get("/calendar/")->children("sort=start_date");
    $events = pagesToJSON($events);
    echo $events; 

} else {
    //display the calendar
    $config->scripts->add('/site/templates/assets/js/fullcalendar.min.js');
    $config->styles->add('/site/templates/assets/css/fullcalendar.css');
    $config->styles->add('/site/templates/assets/css/calendar.css');
    $config->scripts->add('/site/templates/assets/js/cal.js');

    include("./includes/head.inc");?>
    
    <div id="calendar"></div>

<?  include("./includes/footer.inc");
} // end else 
?>

head.inc

<!DOCTYPE HTML>
<html>
<head>
<title><?=$page->title?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- CSS includes defined via $config->styles->add -->
<?php foreach($config->styles as $url) echo "<link rel='stylesheet' type='text/css' href='$url' />";?> 
     
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="/site/templates/assets/js/jquery-1.6.3.min.js"%3E%3C/script%3E'))</script>

<!--js includes defined via $config->scripts->add -->  
<?php foreach($config->scripts as $url) echo "<script type='text/javascript' src='$url'></script>";?>

</head>
<body>

footer.inc

</body>
</html>

antknight · March 12, 2013

Renobird, this is amazing, can't wait to get home and try it out. Before I get my knickers in a twist though could you clarify the suggested page tree structure?

Something like:

Home

--Calendar (calendar.php template) URL segments enabled?

--Event 1 (event.php template with title, start date, end date etc)

--Event 2

Is that correct?

renobird · March 14, 2013

antknight,

Sorry for the delayed response. Your template setup looks correct.

Did you manage to get it working?

antknight · April 2, 2013

Hi Renobird,

Yep I was able to get it working! Thanks for the lovely clear example

sakkoulas · April 3, 2013

thanks renobird that was exactly what i was looking for.

i allso add

'allDay' => false,

after 'url' => "./$event->id", // event ID is the url segment

and now shows the event start - end time inside calendar

arjen · April 3, 2013

@antknight, Perhaps you could explain what you did to make it work? Might be nice for someone finding an answer when he/she searches the forum and runs into the same issues as you did.

sakkoulas · April 3, 2013

add this in header

      $(document).ready(function() {

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
    
      editable: false,
      
      events: "json-code.php",
      
      eventRender: function(event, element, view ) { 
        if (view.name === "agendaDay") {
            element.find('.fc-event-title').append("<br/>" + event.description); 
            }
        },
      eventDrop: function(event, delta) {
        alert(event.title + ' was moved ' + delta + ' days\n' +
          '(should probably update your database)');

      },
      
      loading: function(bool) {
        if (bool) $('#loading').show();
        else $('#loading').hide();
      }

      
    });

$oldTable.remove();

this in json-code.php


function pagesToJSON(PageArray $events) {
    $json = array();
    foreach($events as $event) {
        $json[] = pageToArray($event); 
    }
    return json_encode($json); 
}

function pageToArray(Page $event) {
    $data = array(
        'id' => $event->id,
        'title' => $event->title,
        'start' => date("Y-m-d H:i:s",$event->date_start),
        'end' => date("Y-m-d H:i:s",$event->date_end),
        'url' => "$event->url", // event ID is the url segment
        'description' => "$event->summary",
        'allDay' => false,
    );
  return $data;
}

 // end else 

$calendarPosts=$wire->pages->get('/events/')->children();
echo pagesToJSON($calendarPosts);

end in page where you want the calendar,

<div id='loading' style='display:none'>loading...</div>

</div>

Pitbull · May 10, 2013

hi Sakkoulas.. if you can find some time can you please post the way you did it from start, what scripts to load for calendar and the full code you use to work,

thank you in advance my friend.. i need a event calendar with (event date, time, image ,map, video) for my site i try to build but i am so lost with this

sakkoulas · May 11, 2013

Hi pitbull

Download the fullcalendar from the link below

http://arshaw.com/fullcalendar/download/

Upload the fullcalendar.css , fullcalendar.print.css and fullcalendar.js to your server end embedded in your page header like this

<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates ?>assets/css/styleaahaeota.css">
<link href='<?php echo $config->urls->templates ?>assets/calendar/fullcalendar.css' rel='stylesheet' />
<link href='<?php echo $config->urls->templates ?>assets/calendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="<?php echo $config->urls->templates ?>assets/js/bootstrap.js"></script>
<script src='<?php echo $config->urls->templates ?>assets/calendar/fullcalendar.js'></script>

add the code below in your header after the <script src='<?php echo $config->urls->templates ?>assets/calendar/fullcalendar.js'></script>

<script>
 $(document).ready(function() {
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      editable: false,
      events: "http://weborange.gr/aahaeota/json-events.php",
      
      eventRender: function(event, element, view ) { 
        var image = '<img src="'+event.img+'" />';
        if (view.name === "agendaDay") {
            element.find('.fc-event-title').append("<br/>" + event.description); 
            }
 // on event hover pop up a small discription of the event and an image, 
 // i use bootsrap framework so popoever is curently works only for
 //  bootsrap details in http://twitter.github.io/bootstrap/javascript.html#popovers
//if you dont want this,  delete it or take the code from my last post 
        element.popover({  
          html: true,
          trigger: 'hover',
            title: event.title,
            placement: 'top',
            content: image + '<span class="calendar-detail-time"> ' + event.ddate + ' until ' + event.dend + '</span>' + '<br/>' + event.description ,
        });
        },
      eventDrop: function(event, delta) {
        alert(event.title + ' was moved ' + delta + ' days\n' +
          '(should probably update your database)');

      },
      
      loading: function(bool) {
        if (bool) $('#loading').show();
        else $('#loading').hide();
      }

      
    });

$oldTable.remove();
  });
</script>

create a new php file called json-events.php and upload it in your root folder.

Inside json-events.php add the below code

<?php
include("index.php"); // bootstrap ProcessWire

function pagesToJSON(PageArray $events) {
    $json = array();
    foreach($events as $event) {
        $json[] = pageToArray($event); 
    }
    return json_encode($json); 
}

function pageToArray(Page $event) {
    $data = array(
        'id' => $event->id,
        'title' => $event->title,
        'start' => date("Y-m-d H:i",$event->date_start),
        'end' => date("Y-m-d H:i",$event->date_end),
        'url' => "$event->url", // event ID is the url segment
        'description' => "$event->summary", //event summary  for bootsrap popover
        'allDay' => false, 
        'img' => $event->images->first()->url,  //event image for bootsrap popover
        'ddate' => date("d-m-Y H:i",$event->date_start), //event date start for bootsrap popover
        'dend' => date("d-m-Y H:i",$event->date_end), //event date for bootsrap popover
    );
  return $data;
}

 // end else 

$eventPage = $wire->pages->get('/events/')->children(); 
echo pagesToJSON($eventPage);
?>

and final in the template that you want to render the calendar add

<div class="tab-pane" id="calendary">
   <div id='loading' style='display:none'>loading...</div>
   <div id='calendar' class='calendar-page'></div>
</div>

that's it, you can see example here just go one month before from the upper left arrows

sorry for my bad english , i hope that this is going to help you

Pitbull · May 11, 2013

thank you Sakkoulas this is the help i need!! thank you so much!!

can you please tell me the way you set up the pages tree in admin? so i can try out

sakkoulas · May 11, 2013

Home Page

- company

- events

-- first event

-- second event

-- third event

-- fourth event

-- other event

Contact

Admin

Trash

is this what you're looking for?

Pitbull · May 11, 2013

i am sory i wasnt clear,

i mean what templates i need to make to get the events show in calendar, and how to set up the event pages (what fields),

i folow the steps you tell me, and right know i only see the working calendar but no events

Sakkoulas you are very big help thank you i wiss i could help you some day..

sakkoulas · May 11, 2013

it doesnt do enything, I'm glad I could help,

if it helps i can give you the password for my test page to see by your self the structure but is all in greek in there

so...

- events <-this is the parent event template, has page url 'events' it doesn't matter what fields you have in there . in this page i have put the code

<div id='loading' style='display:none'>loading...</div>

</div>

all the children pages,of 'events' page are actually the pages that been shown in calendar

it doesn't matter what template you use but it must have the fields

title

body

date_start

date_end

summary

headline

images

Pitbull · May 11, 2013

ok!! calendar start to live thank's to you Sakkoulas.. needs some experimental to make it look so nice like yours (time and title dont fit in calendar, image so big) i ques something with css.

i like a lot the (Τελευταία Νέα) you build in your site .. was ease to do?

my friend Sakkoulas people like you make this forum so wonderful and helpful, thank you for all your help!

Eltom · May 14, 2013

This is such a great thread! Thanks to all!

I'm a little confused with the dates. I have the two fields date_start and date_end in my template, defined as "Datetime". As far as I can see, this is correct?

Regardless of what date I'm entering, they are always (!) returned as "start":"1969-12-31 19:00:13","end":"1969-12-31 19:00:14".

Am I missing something here?

Regards,

Thomas

onjegolders · May 14, 2013

Eltom it sounds like those dates are just pre-UNIX so perhaps your values aren't getting sent correctly.

You may have to check the output settings on your date field to a different setting, perhaps Y-m-d ?

Eltom · May 14, 2013

Thanks for the hint, onjegolders!

It seems, that it's only working correct when "none" is selected in the "date output format" on the details page.

onjegolders · May 14, 2013

Thanks for the hint, onjegolders!

It seems, that it's only working correct when "none" is selected in the "date output format" on the details page.

No problem, glad you got it working It probably means your code needs to receive the date value as a unix timestamp so it can make it's own output format.

Soma · May 17, 2013

Thanks for the hint, onjegolders!

It seems, that it's only working correct when "none" is selected in the "date output format" on the details page.

I'm not getting it completely. Do you mean if you enable some output formatting on the date field it outputs wrong date?

Eltom · May 21, 2013

Jep, dates come out wrong if I set some output formatting options. But this is only in conjunction with the calendar code presented here as it seems.

onjegolders · May 21, 2013

I presume it's taking care of the formatting so it wants the date in an unformatted state.

Sign In

Display a list calendar using a date field

Recommended Posts

antknight

apeisa

renobird

Soma

renobird

antknight

renobird

antknight

sakkoulas

arjen

sakkoulas

Pitbull

sakkoulas

Pitbull

sakkoulas

Pitbull

sakkoulas

Pitbull

Eltom

onjegolders

Eltom

onjegolders

Soma

Eltom

onjegolders

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

My Activity Streams

Support

Store

My Details