Houghton Academy

[ryan]

Thanks for the nice feedback.

Maybe just a stand web font there would be better?

Good suggestion. It's pretty readable here, but tried it on my wife's computer and it was a different case. I'll try changing this to Arial or something.

Were you also involved in the information architecture part?

Sort of. I evaluated the information architecture and researched other school sites and came to the conclusion that what they had on their previous site was quite nice in terms of organization. The problem was that it was navigationally bad, which made it hard to wade through. The old site had a design problem, not an architecture one. On the new site the information architecture (and even the exact URLs) are consistent with the previous site for the most part. But the new site makes the information a lot more accessible.

[Alex]

This looks really great, it should feature on the skeleton site i reckon! I have been playing around with skeleton after seeing the new blog profile, it seems like a good responsive companion for processwire as it doesn't dictate too much how things should look.

[renobird]

Events Calendar:

http://houghtonacade.../news/calendar/

The events calendar uses jQuery plugin FullCalendar and it pulls from a ProcessWire-powered JSON feed. ProcessWire gets the data from a Veracross feed a few times a day, caches it, and creates a new feed specific to use with FullCalendar. The events data is also used on other pages in the site, such as the homepage.

Hi Ryan, would you mind sharing some details on how you integrated FullCalendar? I've never setup a JSON feed, so I'm not quite sure where to start.

I built a similar type of calendar a while back using Textpattern, and I'd like to accomplish the same thing with Processwire and FullCalendar. Even a nudge in the right direction would be helpful.

[renobird]

Further digging has uncovered:

http://processwire.com/talk/topic/1417-export-array-to-json-format/#entry12745

http://processwire.com/talk/topic/1539-pagestojson/page__hl__json

I'll start start with these and see how much I can sort out.

[ryan]

There's really not much to it, as json_encode() and json_decode() built-in to PHP provide everything you need to go to/from an array to JSON. So the main thing you have to do is just provide the data to FullCalendar in the format it is looking for. Most of your work will just be translating the format that the events come to you in, to a format that is useful to FullCalendar. In my case, my calendar template looks something like below. This is not the actual code I'm using, but it gets across all the important parts.

Note that the getEventById(), getEventsByDateRange() and renderEvent() functions referred to below are fictional functions that do exactly what they say. I don't know what your event data source is, so how those functions are implemented would depend entirely on where the data is actually coming from. So think of them as placeholders for your implementation.

/site/templates/cal.php

function eventsToJSON(array $events) {

 $items = array();
 foreach($events as $event) {
   // translate events from some source to a format recognizable by fullCalendar
   $items[] = array(
     'id' => $event['id'],
     'title' => $event['description'],
     'start' => "$event[start_date] $event[start_time]", 
     'end' => "$event[end_date] $event[end_time]",
     'url' => "./$event[id]", // event ID is the url segment
     );
 return json_encode($json);
}

if($input->urlSegment1) {
 // event ID provided as a URL segment to this page
 $event = getEventById((int) $input->urlSegment1);
 include("./head.inc"); 
 echo renderEvent($event);
 include("./foot.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 = getEventsByDateRange($start, $end); 
 echo eventsToJSON($events); 

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

 include("./head.inc");
 echo "<div id='calendar'></div>";
 include("./foot.inc"); 
}

FullCalendar gets instantiated by javascript, something like this:

/site/templates/scripts/cal.js

$(document).ready(function() {
 $("#calendar").fullCalendar({
   theme: false,
   editable: false,
   events: "./",
   defaultView: 'month',
   aspectRatio: 4,
   header: {
     left: 'today prev,next',
     center: 'title',
     right: 'month,basicWeek,basicDay'
   },
   eventClick: function(event) {
     window.location.href(event.url); 
     // or load it in a modal
   }
 });
});

[renobird]

Wow, Thanks Ryan!

Very much appreciated. I'll digest that and take a shot at setting this up.

The data source for this will be Processwire pages.

[ryan]

ProcessWire pages would definitely be the ideal data source here. In my case, I had to pull and cache from an outside service (Veracross).

[netcarver]

Methinks this...

	 'url' => "./$event[id]", // event ID is the url segment
	 );
   return json_encode($json); // <<<< wrong data?
}

...should be this...

	 'url' => "./$event[id]", // event ID is the url segment
	 );
   return json_encode($items); // <<<< right data?
}

[ryan]

Thanks Netcarver. That's correct... I wrote it in the browser. I would go back and correct it but know I'll lose all the formatting. :-

[diogo]

Ryan, you don't lose the formatting if you copy the code and paste it back while editing

[ryan]

Ryan, you don't lose the formatting if you copy the code and paste it back while editing

I lose it here unless I copy the code out of the IPB editor (before message has been posted) and into a plain text editor, then paste it back. Once I post a message, I've lost the ability to alter the code without losing formatting. That's because IPB doesn't even retain the original formatting in the posted message (if there's any indentation). In some cases, I can copy the code out of the posted message into my editor, but this only works if there's not much or any indentation. It seems that IPB starts to exponentially magnify any indentation after the first tab (or 2 spaces). So unless I go back and redo all the indentation, IPB exponentially doubles the indentation yet again. :'( I actually keep dozens of text documents open with code samples I've written so that I can go back and re-paste them should I need to, but no longer had the one above. If you know of any tricks to avoid all this, I'd love to learn them. I anxiously await the day when the IPB developers fix these bugs.