In this video, I will show you how to create a view that will display events on a Calendar using the FullCalendar module.

Create a view

  • Go to "Structure => Views => Add new view" (admin/structure/views/add)
  • View name: Calendar
  • [x] Description
    • Event calendar.
  • Show: Content
    • of type: Event
  • [x] Create a page
  • Display format: FullCalendar
  • Items to display: ( leave blank to display all items)
  • [ ] Use a pager
  • (Continue & edit)

You'll see right away that we need to add a date field, so let's do that.

Fields

  • Click "Add"
  • [x] Content: Event Date
  • (Apply(all displays))
  • [ ] Create a label
  • (Apply(all displays))

Now, we've got a date field that FullCalendar can use. Next, let's add the calendar to the main menu so that we can get to it easier.

Page Settings

  • Menu
  • Click "No menu"
  • [x] Normal menu entry
    • Title: Calendar
    • Menu: Main menu
    • Weight: 1
  • (Apply)
  • (Save) (Save the view)

Click the "view Page" button to view the calendar display. One of the great features of FullCalendar is the ability to drag events to new dates. Simply drag the events from one day to another or expand the box to extend the date. You can also click one of the events and it will open the full node view.

In the next video we are going to customize the way dates are displayed for events on the calendar, as well as all of the dates that are used as labels in the header, columns and rows.