Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Getting Started with Calendar

Video loading...

  • 0:00
    [Getting Started with Calendar - Calendars with Drupal 7, Chapter 3 - with Karen Stevenson]
  • 0:05
    In this chapter, Karen is going to go through the process
  • 0:08
    of what it takes to get the calendar enabled and up and running.
  • 0:11
    She's going to go through the process of using a Views template
  • 0:13
    in order to get a calendar working basically right out of the box.
  • 0:17
    It's kind of a new, great process of using the newer Views.
  • 0:20
    It's something a little different than what we've done in the past.
  • 0:22
    In the past, we were used to having to do a lot of hand-holding and configuring
  • 0:24
    just to get a calendar running.
  • 0:26
    But she's going to go through the process of basically point and click
  • 0:29
    and you've got a calendar.
  • 0:31
    She's going to go through some of the different configurations you can do
  • 0:33
    once you've got that calendar up and running.
  • 0:35
    She's going to also cover some of the required things that are necessary
  • 0:38
    to keep the calendar functional and looking proper.
  • 0:40
    So Karen is just going to basically get us started with getting a calendar going.
  • 0:45
    [Stevenson] Now that we have some events and they have data in them,
  • 0:48
    we're ready to start putting this data into a calendar.
  • 0:52
    This is going to be a Views calendar, so we do this using Views.
  • 0:55
    So we go to Structure, Views in the same way that we would go
  • 1:01
    to create any other kind of a view.
  • 1:03
    We can create a calendar view in the same way that we do create other views
  • 1:07
    and build it from scratch, but we don't really recommend that.
  • 1:10
    The easiest way by far is to start with the template,
  • 1:14
    and that is the recommended way to do this.
  • 1:16
    So we have an option up here called Add view from template.
  • 1:19
    If we click on this, we can see that a bunch of things were added by the Calendar module.
  • 1:24
    Basically, Calendar can create a view of any kind of date field that it understands.
  • 1:31
    And so it knows about this field event date that we just created,
  • 1:35
    but it also knows about the core date fields like the created field on the comments
  • 1:41
    or the created field on the nodes or created field on the users.
  • 1:47
    So all of these are date fields that can potentially have calendars.
  • 1:51
    And the way that we create a calendar is we find the field that we're interested in--
  • 1:55
    in this case, we want this one,
  • 1:57
    we want a calendar view of the event date--and we just click Add
  • 2:02
    and then we give it a name.
  • 2:04
    I'm just going to go ahead and call it Calendar.
  • 2:09
    And that's it. All I have to do is save this.
  • 2:15
    Let's go take a look and see what this looks like. I'll look at it in a new tab.
  • 2:21
    And you can see I have a completely configured calendar right out of the box,
  • 2:27
    and it was 1 click, essentially.
  • 2:30
    So this is really great.
  • 2:33
    It's probably pretty obvious why you would want to do it this way
  • 2:37
    rather than build it from scratch, but we'll go back
  • 2:39
    and talk about the components of the calendar and how it all works in just a second.
  • 2:44
    But let's just navigate around here a little bit and see what we've got.
  • 2:47
    First of all, we've got a Month, Week, Day, and Year tab,
  • 2:51
    so we can flip between the different views of the data by using these tabs.
  • 2:59
    We also have a Previous and Next tab, and we can flip back and forth through the months
  • 3:07
    or through the weeks or the days going that way.
  • 3:11
    If we look up here in the URL, this is where it's actually going.
  • 3:17
    So when I go to this Month tab, that's the default tab,
  • 3:23
    so it doesn't actually say anything.
  • 3:25
    It doesn't have a date in it. It doesn't know where it is.
  • 3:29
    It's just on the default tab.
  • 3:31
    As soon as I start moving from one month to the other,
  • 3:35
    I start to see where I really am.
  • 3:37
    And what I have is 2 things that show up in the argument.
  • 3:40
    One is Month. Month says this is the Month view that we're looking at.
  • 3:45
    And then this element right here tells me what date am I looking at.
  • 3:50
    So in this case, I'm looking at the Month view for the date May of 2012.
  • 3:58
    And if I flip to June, I'll see that I'm looking at the Month view of June of 2012.
  • 4:06
    And I can flip back and forth like that.
  • 4:08
    And then if I click this, for instance, and I flip to the Week date,
  • 4:12
    now I'm looking at week with no date.
  • 4:15
    In other words, I'm on the default view of the week.
  • 4:19
    If there's no other information, the default view for any of these displays
  • 4:24
    goes to the current date.
  • 4:26
    So I'm in the week of April 8th right now.
  • 4:29
    As soon as I start flipping back and forth,
  • 4:31
    now I'm going to see something that looks more like this.
  • 4:34
    So now I'm looking at the Week view, and I'm looking at Week 16 of the year 2012.
  • 4:41
    So each one of these displays behaves in a similar way.
  • 4:45
    Another question you might ask would be, How does the calendar know
  • 4:49
    that we want the week to start on Sunday,
  • 4:51
    or does it know if we want the week to start on Sunday?
  • 4:54
    And that setting is coming from the site configuration.
  • 4:58
    So if we go back to where we originally set up the regional settings for the site,
  • 5:02
    we said that the first day of the week is Sunday.
  • 5:05
    If we were on a site where the first day of the week was Monday
  • 5:10
    and we went back to that calendar and refreshed the page,
  • 5:17
    you can see now we have a week that starts on Monday instead of on Sunday.
  • 5:23
    I'm going to change that back again because for the demo that we're doing
  • 5:27
    we're going to leave it on Sunday.
  • 5:29
    But that is where you change that.
  • 5:40
    Okay.
  • 5:42
    So that kind of is what the view looks like.
  • 5:45
    There's a couple of things that I notice,
  • 5:47
    and one is the path is not necessarily real friendly.
  • 5:51
    It's using this long path name of calendar-node-field-event-date,
  • 5:56
    and really I just would like a short path like calendar.
  • 5:59
    We can change all that.
  • 6:01
    We can change anything about this.
  • 6:03
    So let's go back and take a look at the view itself now
  • 6:06
    and see how the view is constructed.
  • 6:08
    You can see that there are a lot of parts to a Calendar view.
  • 6:12
    There's a Month view, a Week view, a Day view, a Year view.
  • 6:17
    There's a mini calendar block comes with it.
  • 6:20
    There's a view of the upcoming events, which is also a block.
  • 6:25
    So there's a couple of blocks that you can add in to your sidebars.
  • 6:30
    And if you have the iCal module, there's an iCal feed as well.
  • 6:35
    So there's a lot of components, and then each one of these components
  • 6:39
    has some very specific pieces to it.
  • 6:41
    It's got a special calendar format and a special calendar row plugin
  • 6:48
    with some special settings.
  • 6:51
    If we look in here, each of these displays has got a date argument.
  • 6:58
    Each one of them has a date pager.
  • 7:00
    The date pager is what flips us back and forth.
  • 7:03
    There are a lot of settings in all these different components,
  • 7:06
    and we'll take you through those in detail as we go into other videos in the series.
  • 7:13
    But for the moment, you can work with what you have.
  • 7:18
    The template has been designed to give you logical settings
  • 7:23
    that are going to work in most situations.
  • 7:28
    So the one thing that we might want to do is we might want to change the path.
  • 7:32
    We talked about that--cleaning up the path a little bit.
  • 7:35
    It's a normal Views page path setting, pretty easy to do.
  • 7:40
    We have kind of a complicated one because the template doesn't know
  • 7:43
    what our path ought to be.
  • 7:45
    But we can clean it up.
  • 7:48
    The important part is it's the name of the path that we want,
  • 7:52
    and then we want to add something to it that identifies which display it's on.
  • 7:58
    So in this case, there's the calendar-month.
  • 8:01
    And then for the Week we can change it to calendar-week.
  • 8:13
    And for the Day we'll change it to calendar-day.
  • 8:18
    The important thing is that it needs to have that argument that identifies the display
  • 8:22
    or your menus are not going to work and your tabs are not going to work.
  • 8:34
    Okay. We save that.
  • 8:37
    And since we changed the path, that tab that we had up here that was going to the calendar
  • 8:43
    is no longer going to work. We need a new one that's going to go to the new one.
  • 8:48
    And let's go take a look. And there we have it.
  • 8:51
    And now we have a cleaned-up path to go to Month, Week, Day, and Year.
  • 9:00
    And now we're set.
  • 9:02
    We have a calendar, it has data in it, and we can start to play around with it,
  • 9:07
    which we're going to do in future videos,
  • 9:09
    and take a look at all the other things that we can do to change it.

Calendars with Drupal 7

Loading ...

Getting Started with Calendar

Loading...
9 minutes 13 seconds // Drupal 7 // HDCC //

In this chapter we will get a calendar up and running on our demo site. We will cover the necessary modules, how to install them, as well as basic site configurations. We'll also show how simple it is to get a calendar on your site using a views template, and then give a tour of some calendar features.

Additional resources: 

Share