Build an Event Calendar in Drupal

49,217 views

Published on

To view a recording of this presentation visit:

http://www.acquia.com/resources/acquia-tv/conference/build-event-calendar-drupal-hands-training-webinar-may-2-2012

Published in: Technology
6 Comments
45 Likes
Statistics
Notes
No Downloads
Views
Total views
49,217
On SlideShare
0
From Embeds
0
Number of Embeds
637
Actions
Shares
0
Downloads
847
Comments
6
Likes
45
Embeds 0
No embeds

No notes for slide

Build an Event Calendar in Drupal

  1. 1. Site building step-by-stepBUILD ANEVENT LISTING
  2. 2. About me• “heather” on Drupal.org• @learningdrupal• @hjames• Manager of Learning Services at Acquia• training.acquia.com - invest in your skills!
  3. 3. Who this is for• New to Drupal?• Want to build an event calendar?• Want to know how to extend Drupal?• Learn site building essentials
  4. 4. What we’ll do• Get inspired looking at examples• Write our specification• Build our event calendar• Review list of modules used• Find out where to learn more!
  5. 5. Models and examplesDiscovery
  6. 6. kilkennyevents.ie - wordpress sitehttp://kilkennyevents.ie a wordpress site
  7. 7. Two modes FullTeaser
  8. 8. Event submission• Anonymous submission• Submitter details• Event details• Image upload
  9. 9. drupalshowcase.com
  10. 10. “Poster view” janepickens.com/coming-attractions
  11. 11. Calendar view janepickens.com/coming-attractions
  12. 12. Full event page Title & dateImage Description Off-site links
  13. 13. Etkinlik Takvim etkinliktakvimi.org
  14. 14. Variety of navigation Month navigation etkinliktakvimi.orgBy category Todayʼs events
  15. 15. Browse by dateimamuseum.org - drupal
  16. 16. Custom themingimamuseum.org - drupal
  17. 17. Filtered list
  18. 18. Event submission
  19. 19. Approval queue
  20. 20. Depends on needs• Frequency of events?• Multiple days?• Images for events?• Who is submitting events?
  21. 21. Specification
  22. 22. Mini calendar
  23. 23. Browse events
  24. 24. Content display• Full page• Teaser mode in Venue listing page• Table showing titles and images
  25. 25. Really local events• Logged in users can submit events• Associate events with a specific venue• Show listing of event “teasers” on one page• Filter by venue• Show mini-calendar in block• Display full event
  26. 26. Starting out of the boxA basic content type
  27. 27. Add content
  28. 28. Structure > Content types > Add content type
  29. 29. Add content
  30. 30. Test!
  31. 31. Published
  32. 32. Event URLManuallyWith PathautoCustom patterns
  33. 33. Pathauto patterns
  34. 34. Other patterns
  35. 35. Improvements• Defaults: No comments, no menu• Add a date field• Add a related venue field
  36. 36. Default settingsCustomizing events
  37. 37. Structure > Content types > Edit “event”
  38. 38. Hide author by default
  39. 39. Close comments by default
  40. 40. Don’t add to menu
  41. 41. Manage fieldsAdd a date field
  42. 42. Manage fields
  43. 43. Date module
  44. 44. Friendly reminder
  45. 45. Date settings
  46. 46. Add date field
  47. 47. Date fields in all types
  48. 48. Field only in Event content
  49. 49. Test!
  50. 50. What’s new?
  51. 51. Improvements• Move date up in form• Pop-up selection
  52. 52. Module: Date Popup
  53. 53. Configure fields
  54. 54. Edit field widget
  55. 55. Test!
  56. 56. Add an image field
  57. 57. Add image field
  58. 58. Default image
  59. 59. Field settings
  60. 60. Arrange in form
  61. 61. Manage display
  62. 62. Teaser settings
  63. 63. Teaser image
  64. 64. Configuration > Media > Image styles
  65. 65. Override > Scale& Crop
  66. 66. Test! Attribution 2.0 Generic (CC BY 2.0) By suzettesuzette flickr.com/photos/suzettesuzette/6864436698/
  67. 67. Current state
  68. 68. Next• Add related links• Add related venue• Is a field required? Why?• OK in unstructured “body” text field?
  69. 69. Add related links field
  70. 70. Link module
  71. 71. Add link field
  72. 72. Default settings
  73. 73. Link field settings
  74. 74. Manage display
  75. 75. Test!
  76. 76. Links are visible
  77. 77. Next• Related venue• Select from limited options• Internal content, not external links• Why Drupal manage? • Renaming venues • Change of URL path • Adding new venue • Removing venues
  78. 78. Add venue
  79. 79. Related venue content type?• Defaults: • No comments. • No adding to main menu. • No author and date info. • Not promoted to front page.• Fields: • Title and body.
  80. 80. Better: Vocabulary• Vocabulary: Venue • Description• Terms: Controlled by administrator• Bonus: RSS feed per venue, easy to navigate.
  81. 81. Structure > Taxonomy > Add
  82. 82. Add terms
  83. 83. Add terms
  84. 84. Terms
  85. 85. Add as a field• Add field• Set global defaults• Set content-type specific defaults• Arrange field• Check display
  86. 86. Term reference field
  87. 87. Field settings Keep other defaults
  88. 88. Arrange field
  89. 89. Manage display
  90. 90. Test!
  91. 91. Teaser: Shows venue
  92. 92. Report: Field list
  93. 93. What’s next?• Who can create events?• Test with bulk creation of content• Create listings • Listing all events • Filter by venue • Sortable table • Mini month in sidebar
  94. 94. Event display
  95. 95. Current layout
  96. 96. Manage display
  97. 97. Default
  98. 98. Display suite
  99. 99. View modes
  100. 100. Current layout
  101. 101. Preview
  102. 102. Change markup options
  103. 103. Hide labels
  104. 104. Labels inline
  105. 105. Preview
  106. 106. Markup mixup
  107. 107. Fences?
  108. 108. Fences?
  109. 109. DS: ExtrasStructure > Display Suite > Extras
  110. 110. Minimal
  111. 111. Override field
  112. 112. Override fieldfield field-label-inline clearfix field-type-taxonomy-term-reference
  113. 113. Preview
  114. 114. Lost classes
  115. 115. Override field
  116. 116. Preview
  117. 117. Cleaner markup
  118. 118. Improvements• Adjust remaining fields - consistent• What classes are needed?• Add CSS to style new markup
  119. 119. Improvements• Add CSS styling to your theme.• In this case we’re using “Bartik” core theme. This would require making a sub-theme.• Don’t edit a core theme.
  120. 120. Who can add events?Content editing
  121. 121. Who can edit events?• All users?• Authenticated users?• Only administrators?• How do people become “authenticated”?
  122. 122. People > Permissions > Role
  123. 123. People > Permissions > “Node”
  124. 124. Account settings
  125. 125. Test!
  126. 126. Login as testuser
  127. 127. Improvement• Link in main menu + Add an event
  128. 128. Structure > Menus
  129. 129. Add a link
  130. 130. Order links
  131. 131. Test! Not logged inLogged in
  132. 132. Improvements• Should items be published automatically?• Should we make an approval queue? • Use Views Bulk Operations• Test with real content editors and REAL content.
  133. 133. Add sample content
  134. 134. Developer moduleConfiguration > Development > Generate content
  135. 135. Generate content in Latin!
  136. 136. Lots of content
  137. 137. Content editing• Make sure a couple of events are in the same month.• Edit some titles so they fit with the content (if you’re testing with users).
  138. 138. Filter by venueCreate listing page
  139. 139. What do we have now?
  140. 140. Views module + Any dependencies
  141. 141. Structure > Views > + Add
  142. 142. Add menu link
  143. 143. Event listing
  144. 144. Views configuration
  145. 145. Add fields
  146. 146. Configure each
  147. 147. Image display
  148. 148. Venue display
  149. 149. Preview
  150. 150. Improvements• Default sort for date• Sortable columns for Venue and date• Image first
  151. 151. Arrange fields
  152. 152. Column sorting
  153. 153. Preview!
  154. 154. Improvement• Add filter to allow user to select one venue• Filter out past events for this listing
  155. 155. Add exposed filter
  156. 156. Expose filter
  157. 157. Preview!
  158. 158. Add date filter
  159. 159. Preview!
  160. 160. Event listing
  161. 161. Calendar page
  162. 162. Date views
  163. 163. Template options
  164. 164. Rename view
  165. 165. Defaults
  166. 166. Preview defaults
  167. 167. Default by month
  168. 168. By week
  169. 169. By day
  170. 170. By year
  171. 171. Customize
  172. 172. Structure > Blocks
  173. 173. Block: Upcoming
  174. 174. View: Event calendar
  175. 175. Preview
  176. 176. Improvements?• “Share this” button. drupal.org/project/sharethis• “Bookmark” option. drupal.org/project/flag
  177. 177. What’s next?Learn more
  178. 178. Training in May-June training.acquia.com/events
  179. 179. Site building - May & JuneDrupal in a Day Site BuildingLeuven, Belgium Vancouver, CanadaAlexandria, VA Portland, ORVancouver, Canada Cincinnati, OHPortland, OR Leuven, BelgiumCincinnati, OH Amherst, MA,Toronto, CA Geneva, SwitzerlandAmherst, MA, New York, NYGeneva, Switzerland Schaumburg, ILNew York, NY Bordeaux, FranceBordeaux, France Charlotte, NCCharlotte, NC Washington, DCWashington, DC Dallas, TXDallas, TX San Francisco, CAParis, France Paris, FranceMontreal, Canada Montreal, Canada training.acquia.com/events
  180. 180. j.mp/datesD7 Available now
  181. 181. j.mp/fullcalendar-course May 17th
  182. 182. Styling j.mp/calendar-theme
  183. 183. udemy.com/learn-drupal
  184. 184. Site building - May & JuneDrupal in a Day Site BuildingLeuven, Belgium Vancouver, CanadaAlexandria, VA Portland, ORVancouver, Canada Cincinnati, OHPortland, OR Leuven, BelgiumCincinnati, OH Amherst, MA,Toronto, CA Geneva, SwitzerlandAmherst, MA, New York, NYGeneva, Switzerland Schaumburg, ILNew York, NY Bordeaux, FranceBordeaux, France Charlotte, NCCharlotte, NC Washington, DCWashington, DC Dallas, TXDallas, TX San Francisco, CAParis, France Paris, FranceMontreal, Canada Montreal, Canada training.acquia.com/events
  185. 185. What modules appeared?Cast & Credits
  186. 186. Date entrydrupal.org/project/date
  187. 187. Related linksdrupal.org/project/link
  188. 188. Filterable event listdrupal.org/project/views
  189. 189. Calendar grid displaydrupal.org/project/calendar
  190. 190. What fields appear wheredrupal.org/project/ds
  191. 191. Markup controldrupal.org/project/fences
  192. 192. Supporting cast• Token• Pathauto - Human friendly URLs• CTools - Magic for Views• Devel - Bulk creation of content for testing
  193. 193. Any questions?

×