Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

2.3 The Calendar Module

Rounding off modules, you’ll get to know the Calendar module, which makes it easy to use the FullCalendar library within your Angular applications.

Related Links

2.3 The Calendar Module

In this lesson, we're going to look at AngularUI's Calendar module. The Calendar module wraps the full calendar JavaScript library, which you can find out all about at www.fullcalendar.io. You can see we've got a calendar here for displaying different events and we can move between months, et cetera. We're going to go ahead and make a very basic calendar like this in this lesson. I've copied our template and created a calendar project here, and we're going to start by doing bower install angular-ui-calendar. Notice it's not sure which version of jQuery to use, so I'm going to go ahead and choose version two here. Okay, so we have that installed, but notice we didn't just install the calendar. If I list out what's in the public/lib directory you can see we already got the fullcalendar library, as well as jquery and jquery-ui. So, the first order of business is to bring in all of our script tags. So, let's go ahead and open our index.html page. Now let me copy our angular here, twice, for our first, we need jQuery so that's publiclib/jquery/distribution/jquery.min- .js. Next, we want jquery-ui/ui/jquery-ui. Then of course, we need angular and then let's actually add two more after angular here. The first one will be fullcalendar. /fullcalendar.js and the other one here will be angular-ui-calendar/src/calendar. Okay, I think we have all the script tags. Let's also add a link up at the top here for a stylesheet, and the href for this stylesheet will be public/lib/fullcalendar/fullcalendar.css. Now let's open up our app.js file. And one of the things about this calendar UI is that it is primarily made to display data and not really be an actual calendar application. So what this means is, by default, it's very good at displaying events, but out of the box, it doesn't really support creating and changing events. Now, of course, you could go ahead and build this functionality into your application so that you can add events to the calendar, remove events and change the information about events, but by default, it just displays events. So in this screen cast, we're going to display a couple of events. I'm gonna paste in a couple of events here, just so you don't have to see me type these out. Notice that fullcalendar is very flexible in the way it accepts its events. You can see the first one here has a title and just a start date, and by default, something like this would be considered to be a full day event. Here we have an anniversary party. That has a date and time as its start and a date time as its end, and you have to mark allDay as false if you don't want an event to be considered an all day event. And here, we have a business conference which actually spans multiple days. So, everyday from September 22nd to September 24th here, will be considered part of this business conference. So, we have these events here, and what we need to do is create a scope.eventSources array, and we'll just pass events to this array. Now, of course, we also want some calOptions, right? And these are different options for our calendar. Once again, there are many different options that we could set, but I'm gonna go with just a few. Let's first say, editable equals true. By default, calendar events are not editable, which means they can't be changed. Now, the calendar, like I said earlier, doesn't really support changing events. When we set editable to true, really the only behavior we're enabling is that we can drag events around to different days to change the date they're on. So, I'll set editable to true. Second, we have the header that we want to set. This is what's going to appear at the top of our calendar. And this is actually a pretty neat way of doing it. We have a left field, we have a center field, and we have a right field. And then we have a bunch of different values that we can put in here. So, we can put next, and we can put previous. We can put title, we could put today. And each one of these gives us a different feature. So, of course, next and previous are next and previous buttons to move between months. The title here would be the name of the month. So for example, I'm recording this lesson in September 2014. Today would be a button that actually takes you to the current date. So let's go ahead and put the previous button on the left, the title button in the center, and let's put next on the right. This is what we will do, and now we're ready to actually create our calendar. So, inside MainController here, let's create a new div, and now let's also use ui-calendar, and we can pass it calOptions. And that is, of course, our calOptions are from over here and that's how we accept those options. Now the other thing that we need to set is the event sources right? This is the way for our calendar to see its events. So, we set this with the ng-model attribute and we'll just say eventSources. And then we can close our div here, and that should really be all we need to do. And if we open this in the browser ,we get absolutely nothing. Oh, it's because we never actually required our dependencies. So, let's say ui.calendar right up there in our module dependencies. And now if I refresh the page, okay, there we go. So, now we have our calendar. So, you can see right here, notice it takes up the full width of the page. So, if we didn't want that, we would actually have to set a different width. Let's go ahead and do that. So, to the .calendar class which we gave it, let's go ahead and give it a width of, and we'll just say 50% for now. Now, if we refresh the page, all right, you can see it's much smaller there. So, notice we have our calendar here, our heading showing up just as it should. We have our previous and next buttons here. We have events showing up at exactly the right time. Notice if they're all-day events, they don't have a time. If they are not all-day events, we can see what time they start at. Today is highlighted, it is the 26th of September, 2014. And notice because it's editable we can actually drag things. And let's not drag your birthday because that wouldn't change, but maybe the party changes to Saturday night instead of Friday night. Or the conference here changes to be over a weekend. I think it's really neat that the full calendar library here makes it incredibly easy to drag around events by default. But of course, remember that this is primarily for displaying data. So, maybe your company has a website which displays a bunch of events that are held every month or at certain intervals, or whatever. This library would be a great way to display those events to all the visitors to your website.

Back to the top