Drupal 7 FullCalendar

By shane
Wed, 2014-11-19 06:49
Daily Dose of Drupal Episode #179

Share with Others

The Drupal FullCalendar module makes it easy to build an interactive calendar using the power of Views. The Drupal FullCalendar module uses the JQuery FullCalendar plugin to make it easy to create an event calendar that allows event dates to be changed by drag and drop.

In this episode you will learn:

  • How to install and configure the Drupal FullCalendar module
  • How to create your FullCalendar view to display your calendar
  • How to categorize events with a colored Calendar Key, by content type and by taxonomy term

Hello everyone and welcome to another Daily Dose of Drupal. I am Shane Thomas and today we’re on Episode Number 178. Today we’re going to go over the Full Calendar Module. The Full Calendar Module uses a jQuery plugin called Full Calendar that allows you to use Views to display interactive and draggable calendar events. So it’s somewhat similar to the way Google Calendar works, if you’re familiar with that.

So we’re going to take a look at that and see how you can make your own Event Calendar. Before we get started; make sure to check out codekarate.com, check out the EBook. We recently released and Git Cheat Sheet and a Drush Cheat Sheet which are just kind of helpful little things if you’re just learning about those topics and go ahead and follow me on Twitter at smthomas3 if you have not already. Let’s go ahead and get started.

The first thing you’re going to want to do is have the Full Calendar Module downloaded. I’m also downloading and installing the Colors Module which the Colors Module just allows you to display a nice legend to that color codes different types of events. The next thing you’re going to want to make sure you have is the actual Full Calendar plugin. So you can see it’s at Full Calendar.IO, there’s a Read-Me file within the Full Calendar Module that you can use and it walk you through how to install this.

One thing that’s important, I’ll click over is this warning right here. You need to make sure you’re using 1.5.X version of the plugin, not the 2.0. So let’s go ahead and click on the Download and you’ll see the current version is 2.1.1 but in this case you’re going to want to click on this all releases links. It’s a little hard to see. And scroll down until you find the 1.5 version. So 1.5.4, you can download the zip folder and drop only the Full Calendar sub-folder into your sites all libraries.

So that’s the important part. There’s Demos folder, there’s a J Query folder then there’s a Full Calendar folder within this zip. Only take the Full Calendar folder portion and put that in your sites all libraries folder and you should be good to go. So once you have that all dropped in, you can then go ahead and turn the module on. So I’m going to start with just turning on the Full Calendar Module. So we will save that and we can click Configure and it’ll allow you to select the path to Full Calendar and which version to use.

One important thing you can do is come to the Status Report page and you can confirm that the Full Calendar plugin found the correct version of Full Calendar that you actually dropped in there so it says 1.5.4 and I believe there are has been some movement on this Full Calendar Module to get it up to date with the newer 2.1 or 2.0 versions but I’m not sure exactly the status of that. The next step is to create your content type. In this case we’re going to create the content type called Calendar Events.

We will go ahead and not promote it to the front page and we will hide the comments and we will click Save and Add Fields. One more important thing to note, you have to have the Date Modules installed, you’ll need the Date Modules, you’ll also need Views, I didn’t go over that but you want to make sure those are installed so we’re going to create a new field called Calendar Date, select date and we’ll use just the Pop-up Calendar so that it’s just using the Date Popup Module and we’ll save that.

We will collect an end date and then you can see we have here month, day, hour and minute as the date to collect or the attributes to collect. So click Save, we can live everything else at the defaults here and that’s all you need for your content type. You can of course add additional fields or information if you want. We’ll just stick with that for now.

The next step is going to be to create our new View. I’ll just call this View Full Calendar and we’re going to show Content of Type Calendar Event. We want to create the page and we’ll leave the path at full calendar. I’m going to leave this unformatted list for now just to prevent seeing some error messages. We’re going to eventually change this to full calendar but it’s a little bit easier to make sure you have a Date Field added first so you don’t see a bunch or error messages showing up. So I’m going to go ahead and hit Continue and Edit. We’re going to turn the pager off because we don’t want the pager to show up. We want to display all items.

We also then want to make sure we change this so it’s showing fields and not just content and we need to add our Date Field. We search for Date, here’s our Calendar Date Field. We’ll add that, I’m going leave this at its default and hit Apply All Displays. The next step is to change this from unformatted list to now our Full Calendar Display. And you have a bunch of settings you can configure here so if you want the initial display to be something besides a Month, you can change that, change where your week starts. You can change at what the week mode is going to be whether it’s fixed, liquid or variable.
I’m going to leave it at the default, you can change some of the heading settings, the header settings, how the time and date is displayed. You’ll also have some style settings that you can configure. You can also customize how the fields are displayed. We’re going to leave everything at the default but know that those options are there. The other thing we’re going to want to do is change this Use Ajax to Yes.

So let’s go ahead and click Save, we are now going to go view the page so I’ll just open that up in new tab and you’ll see we now have an empty calendar. So let’s an event; so go to Add Content Calendar Event. So I’m just going to call this Test Event 1, I’m going to ignore those errors for now and I’m just going to set it for 1 hour from 7:30 to 8:30, put a little bit in the description and click Save. Now if we go back to the Full Calendar page you’ll see we have our event. The cool thing about this calendar is you can then just move this event to whatever date and it says the New Event Time has been saved.

So you can see I can change the date very easily, I can go into week view here and let’s say I decided I want to stay to be or this event to be a little longer. I can just drag it and now it’s going from 7:30 to 9:30, I can move it through a different day, Exactly as you’d expect, Similar to how Google Calendar works and it makes it really easy to organize a calendar and move events around. So you can imagine having a lot more events. Here you can organize your calendar easily but what if we had different types of events? We may want these different types of events to be color coded in different ways and the Full Calendar Module allows you to do that as well. It also allows you to have additional configuration options. So let’s look at some of those things and they are add-on modules that come with Full Calendar.

The first one will look at is this Full Calendar Options Module. Let’s go ahead and turn that on, hit Save and if you click Configure here you’ll see these are the options that you can turn on. Anything that is checked will have a corresponding option in the view. So in your calendar view you’ll have initial options that you can then set. We’re not going to go through all of these but you can look through them. I’ll just show you that they show up so let me refresh and go into settings. Let’s get out of this overlay. Looks like it doesn’t want to let me open this up. It’s a little bit of a hiccup here with Views.

Let’s try to open it back up then and see if that works. I have run into this before with the Full Calendar Module. It seems like there’s a few little bugs with how it works with Views. Typically it seems to start working again after a while. So I don’t know exactly what is causing that. It seems like everything else was working before. Okay so I think I figured out the issue here with the View and it turns out that you don’t actually need this Use Ajax to be turned on in order for Full Calendar to seem to work properly.

So once you go ahead and if you are receiving some of those same View errors that you saw me running into. Go ahead and turn Use Ajax to know and save it and then you should be able to get into your settings. If you remember we turned on that module, so let’s go ahead and look at the extra options that are now available. You can see we can set what the first hour should be, set the minimum and maximum time, the default event minutes, there’s a whole bunch of additional options that you now have at your disposal when creating your Full Calendar View. So if we set those we can of course change those and click Save.

The next module we want to look at that comes with Full Calendar, there’s actually two of them. It’s the Full Calendar Colors and the Full Calendar Legend. We’re going to go ahead and turn both those on. As I mentioned before, you’ll need the colors module, not the color but actual colors with an S as they are different modules. So once we change those to on and click Save, we now have the option to add a calendar legend to our calendar. So the calendar legend is just a block so we’re going to go into blocks and look for the Full Calendar legend. We can set that into sidebar first can click Save.

If you’ll notice we now have the Full Calendar legend, I’m going to actually move it up here a little bit and put it in that spot and click Save. If you come to the configuration page for the Full Calendar Legend block, you’ll see there is a legend type. You can change this to Bundle or Taxonomy. So what this will allow you to do is it allows you to categorize and sue different colors based on content type if you select Bundle.

So you may have a Calendar Event Content Type, you may have a doctor’s appointment content type or an appointment content type or a to-do list content type and you want those various pieces of content to show up with different colors on your calendar. So that is one option or you can classify through taxonomy which is probably a better option and easier option but depending on how you have your Drupal site setup. You may have a user both of those.

I’m just going to leave it at Bundle for now just to show that it works. If we now go to Full Calendar you’ll see over here there is a legend that shows blue for calendar event. I can still move my events around and change the length of time and everything works as it did before. If I add an additional content type and I add it to the view then I would have different colors based on the different types of content that is being displayed within this calendar. And as I mentioned before; go ahead and use taxonomy as well, just change that setting on that block and you can add a taxonomy field to your content type and categorize your content that way so they show up with different colors.

So that’s it for the Full Calendar Module, it’s a really cool module, it’s not too hard to configure, as you saw we ran into a few little issues but those are relatively minor hiccups and now it’s working great and I have a nicely displayed calendar working on my Drupal site that is interactive and very Ajax friendly.

Go ahead and follow me on Twitter, as I mentioned before, smthomas3, check out codekarate.com, we have a lot of cool stuff coming out and let us know what you think and we will talk to you later. See you.