Add a Robust Events System to Your Drupal Site in Minutes / DrupalCon North America 2021

let's get the sharing going everybody can see the slides okay perfect all right so uh apologies for the uh technical challenges there but uh i suppose with an online conference even an in-person conference not unheard of so yes thanks everybody for coming out today we're going to talk about how you can add a robust event system to your drupal site in just minutes and my name is martin anderson klitz on drupal.org and various platforms including twitter i go by mandiklu and i work for a company formerly known as digital echidna that now is known by the name of northern so for our talk today we're actually going to do most of the um spend most of our time in this demo environment that i set up which really is a fresh install of drupal 9 so i just reset it over lunch time and um it's just to to sort of verify for you all that this is a fresh install of drupal we're going to go up here to the add content and show that there's only the two default content types there so from there i wanted to just say you know it's basically if you wanted to spin up a really simple version of drupal you could do that in just four commands this is closer to what i did because i wanted to install admin toolbar i find that makes using drupal a lot easier also the gin admin theme and gen toolbar and then set those as the defaults and so on so um to sort of reproduce exactly what i'm working with you'd be looking at something more like that if you wanted to make it into a single sort of chain command so you could just run it and then it's done it would look more like that so if you want to you know try these steps at home later on you can use that as a as a guide point and i i tried to mention earlier but um i think i might have been muted that the slides will be posted um the session later on so you can use this as a guide if you want to reproduce what we're going to see so really in terms of what we're going to do here um let's start actually getting something installed to create this event management system that we want so let's go composer acquire date calendar yes so you'll notice that this runs super fast which is one of the many benefits of composer 2 so if you haven't tried it yet i definitely would encourage you to do that and now let's get that module installed so now we're going to enable the direct support calendar kit it is going to enable a few modules and install some configuration and now that that's done we can go back here and if we go back let's refresh the page and now if we go back up to our content menu you can see that we have this event content type but we before we dig into that let's uh dig into or spell out i guess what what we mean when we talk about a robust event management system so we want to create an event content type that has um an input with sort of app like functionality something that will feel familiar to your editors when they're using that within drupal for the first time you want to have the ability to have a checkbox for all day events because again that that lines up with popular calendar applications the ability to manage recurring events potentially with time zones and then also to have more natural language output and we'll we'll dig into exactly what that means in a couple of slides we want to have lists of both upcoming and past events as well as an interactive calendar where you can sort of drag and drop to manage the different events that are upcoming and so on and the bulk of what we're going to see is really based on this smart date module which was um only an idea a little over two years ago and now is one of the 500 most popular modules on drupal.org but that idea really started off with this editor experience i had been working on an events website and doing some uh getting some data populated into it so that we could you know troubleshoot views and do theming and so on and i started to notice how tedious it was to input dates and times in the site that we were building and and i started thinking about why is that so different from you know using something like a google calendar and i started to realize that part of it or a big part of it is because in this type of a configuration you have to manually populate 14 different pieces of data so for the start you've got year month day and then for the time you've got hour minute seconds and then am or pm and then you know another seven pieces of data for the end whereas if you contrast that to popular calendar software they do a couple of things that substantially reduces the amount of effort so one of them is having this default that falls uh the next hour on the hour and then the other bigger piece is really this concept of duration so it defaults to an idea of a duration of one hour and then as you adjust the start it will automatically adjust the end and so um those definitely aren't going to line up with a hundred percent of the meetings that people are looking to schedule but it it fits a lot of very common use cases and so there are probably a lot of times where you might go to create an event in your calendar and you only need to change two or three pieces of data to to have you know your dates and times entirely set up which again is a big difference from the 14 that you need with core uh the other thing that i'll point out is both of these have again that all-day check box the ability to repeat events and it's probably cut off on the apple one but i'm sure it has it uh also the ability to manage time zones so let's come back to that uh discussion of natural language output so this is out of the box what you tend to get with a drupal core date range field so it it basically um fully spells out the information for both the start and the end which is quite a difference from if you were to write the same range um sort of by hand you'd probably only write out the date once and then it's pretty common when something falls on the hour to format that differently than it does you know at some other point within the hour and usually you would also only show the time zone once um and i guess the the context there is that that was something that i was getting a lot of clients asking us to do and it felt like it was is sort of custom to implement every time so definitely something that we wanted to to make easier to implement also around the same time i was getting a site ready to launch and doing a crawl looking for performance issues and i was really surprised to see that the slowest page on the site was an events archive page that basically had no data in it and there weren't that many events overall so i i opened up the um query debugging and views and was surprised to see how much work um the database was having to do on kind of a row viral level to convert data you know strings and so on into dates that could be used for the proper comparison and so that's when i realized that there was actually performance issue with storing dates of strings and that's why i wanted to um use something that would be more efficient and so at that point i decided that we really needed a module that could provide that better editor user experience that could provide um you know sort of more natural language formatting out of the box and then also address those kinds of performance issues so with all of that said now let's go back into our demo environment here and look at the ability to create an event here so let's just call this test event and you can see that it already has some of the similarities so it has that concept of duration and we can switch the duration it will automatically update the end we could update the beginning and it updates the end based on the duration and the beginning we have our all-day check box and so on but let's go ahead and make a couple of other events here just so we can show some of the other features um let's so if we save that um you can see that it's done uh some of those things that we've talked about already so um for a range that's within the same day it only shows the date once uh if it falls on the hour it shows more compact formatting the date isn't quite as clean as we would like but part of the challenge there is that when you have the day of the week as part of your date string it becomes much more challenging to to make that more compact so let's go ahead and update our display configuration to a different format so when we go down here we've got a number of different formatters we're just using the default smartdate one and smartdate has its own formats it comes with four out of the box so let's go to this compact one and when we save that and save our configuration we can refresh our date and you can see how much cleaner that is april 15th to 18th um it will only output the um the month and the year once unless uh the date crosses over and in which case it has the intelligence to be able to add additional pieces as they're actually necessary to accurately accurately represent your event all right um we talked about time zones as being one of our requirements and actually smart date supports time zones out of the box but because many sites don't actually need them it's left as sort of an optional piece that you can add in by switching the widget so if we switch our widget here we can look at the configuration we have the ability by default it'll only store a time zone if it's specified and different from or only it'll only start if it's explicitly declared you can do things like make sure that a time zone is always stored whether or not it matches the um the site but i find that this this works pretty well the other thing that you can also do if you leave this empty it'll just show all of the time zones on the edit experience but it is possible to show your editors a subset of that list so let's say you have a site where you only need to support us time zones so we could say um let's show anchorage let's show let's see chicago um oh show denver and los angeles and new york so if we save that now let's go back over here and actually create a new event and you can see now we have our time zone drop down um but it's showing us just the options that we've sort of explicitly told it to make available so for your editors that can be a substantial uh time saving in terms of you know not having to scroll through that whole giant list so let's go ahead and call this i'm going to event actually backdate this one a couple of days and go ahead and save that all right so you can see now it's got um our event it's outputting it as the time that we declared it at two to three pm this is in mountain time as we declared it in brackets it's putting the site time so that you can see both of those which can also be kind of a cue for visitors in terms of knowing that it's a different time than the site defaults or using a different time zone but it would be more useful if it had the actual time zone explicitly shown in there and so what we need to do is update our smart date format to include that time zone so let's go ahead and go into there um one of the things that you'll notice in here is that there are definitely similarities between the smart date formats and sort of the core date formats in the sense that they both use these php date codes but the smart date formats are much more granular so you've got separate ones for date and time and then you can even have a separate one for times that fall in the hours so let's go ahead and just add the versions that have the time zone there are a variety of other configurations that you can do to really sort of customize that output to whatever your specific needs are and even um if that output duplication isn't working well for your particular use case you can turn it off entirely including that site time display the other thing i'll point out is that all of this configuration is completely translatable so you can have um you know very sort of culturally specific um date formatting depending on you know which languages and and sort of countries you need to support so now with that changed let's go back into here let's refresh that and now you can see it showing our our time zones in there all right um next thing we should touch on is recurring events so we mentioned that as one of the things that we want to have as part of our event system it is something that's pretty commonly available especially again in the the application software that your editors are probably used to interacting with on a daily basis and though there are some differences in terms of the interfaces that they tend to use for those the functionality that they provide is generally pretty similar so the ability to provide events that recur you know on a a certain interval so like every two weeks being able to repeat sort of daily weekly monthly or annually you can set specific days of the week on which it should recur and then also to be able to have it end either on a specific date or after a certain number of occurrences i'll mention in passing that some of these apps use this r rule specification as a way to define the um you know sort of the the rule on which that event is going to recur um if you want later on like maybe in the questions we could dive into that but i'm not going to dig too far into that today in terms of how smart date implements recurring dates um one of the key decisions was to have the instances of that recurring rule actually stored as normal field deltas for that smart date field and that means that when you use it to display things access the values through twig create views any of those things it behaves just like a normal field value you don't have to do any kind of sort of extra site building anything to to make those accessible and available you do have the ability to override specific instances so you could you know reschedule one of them to a different day or cancel it all together and you also even have the ability to revert them back to the original um you know sort of time and date there is also a um i'm going the wrong direction here uh there is also a special formatter for crankbaits where um you can really optimize the output but we're actually going to see that in the demo so i'm not going to dive too far into that here i did also try and adopt this idea of starter kits which are really modules that only provide configurations so the idea being that if you wanted to use smart date or even use smart date with something like full calendar view rather than having to sort of install each module individually and then configure them to work together you can install one module like we've done um in this session and get both modules pre-configured in in this event management system and so if you're wanting to try out smart date it can be a really good way to see how it's meant to work but you could also use it as the starting point in terms of um you know if your site has requirements um for some of these elements then you can install something like the smart date calendar kit and then continue to add fields and filters and and basically mold it into exactly what your site needs to be i've tried to build in a lot of what i consider best practices in terms of providing a good administrative experience but if you install it and have some different ideas definitely would welcome you know patches or feature requests and what have you so in terms of the calendar integration um it's pretty feature rich in the sense that it has that drag and drop support you can do things like a double click within the calendar to add different events and because of the way smartdate handles recurring dates as sort of normal field deltas there is full support for all of your recurring dates out of the box and you can sort of have any kind of mixture of recurring and non-recurring dates without having any kind of technical challenges so with that let's actually go back to the command line and run the last command that we need here which is to enable um the recurring submodule so that's smart all right and then the last thing that we need to do now is to go back to our field and explicitly tell drupal that we want this field to allow recurring dates smartdate doesn't assume that just because you can make dates recurring that you want to do that for every field where you've used it so it's something that you have to explicitly tell it to use um there's this months to extend because you don't have to set an end to your date but if you create a date without specifying any kind of an end you wouldn't want drupal to sort of like keep generating instances until it runs out of memory or you know blows up your database or both so it uses this concept of kind of a time window and it'll generate out to that and then use a cron job to make sure that you always have you know in this example 12 months of events moving out into the future i'll also show while we're in here that here's where you can configure some of the other elements for smart date so it provides this custom default value of next hour you could also customize the duration values that were available so let's just change something we'll set a zero duration as something that's allowable so let's say you had um a website launch that you wanted to put in your calendar it's really more of a moment in time as opposed to something that has a start and an end and let's just add another one in here you can also change what the direct the default duration is and if we save that and now go over to here and create create a new event you can see now that we have our ability to set it as recurring it's changed the default value and now we have some of those other elements we can set a zero duration if we want to and all of those have changed but let's play around with the recurring values so you can say you know every three months you can also do things like say it should be every month on the you know third wednesday in our case i think what we'll do is just leave those for now we'll make it weekly recurring maybe every other week on monday and thursday and let's say that that should end after 10 times forgetting to give that a title let's call that recurring event and now uh you can see that it's generated all of those instances for us it's showing us all of the values that it's created it's not terrible when it's just 10 but you can imagine if you had an event that was recurring let's say two times a week for the next two years then that would get really unwieldy in terms of the amount of data to show so let's take a look at using the smart date recurring formatter so if we change it to that in terms of the options that we have now we can um set a specific number of recent and upcoming instances that should actually be shown so let's say maybe we only want to show the one more most recent and the three next ones that are coming up there's an optional html time wrapper html5 time wrapper you can show that if we update and save that and now look at our recurring event again you can see it gives us sort of this natural language outputs of our event happens every two weeks on monday and thursday at two for ten times um oh i know why it's only showing up coming is because it starts now so there haven't been any reason so let's go ahead and backdate this back to there and now when we update it we can see we have uh it's showing the one most recent exactly the way we've configured it and then the three next ones the structure of all of this is in a twig template so when in your theme if you said i don't want to have these as collapsible details elements i want them as nested divs i want to reorder these in any way you have all of the flexibility there and then the last thing since we mentioned it in the configuration is let's take a look at the markup here and see that it's using the html5 time element which can also help with your seo in terms of being able to sort of parse out those micro formats all right i think the last thing then is to look at the calendar so let's go up to our calendar and should be able to see all of the different events that we've created so far in this demo so our recurring event is in there the sort of single events that we've we've created are in there we could do something like take the specific one and move it over a day it asks for a confirmation this is something you can turn off if you don't want it in the view configuration for full calendar view personally i like to have it because i think with drag and drop it be pretty easy for somebody to change something unintentionally and not realize it so let's say that's okay you can also within the day drag and drop to change when it happens and you can even drag and drop to change the duration and then the other thing that we mentioned was the ability to double click you can see that it defaults to exactly the date and time of where we had clicked in the calendar so let's just call that our calendar created event and save it and now when it comes back you can see our calendar created event is in there the other thing that i'll mention is we talked about having list views and it gave us those out of the box as well so we've got our upcoming events and our past events and those are all connected in a nice little tab set there so um i feel like we've we've gone through and we've been able to deliver on all of those requirements that we talked about um pretty easily so we've got our app like widget we've got an all-day check box um there's time stamps under the hood that one's a little harder to demonstrate in a presentation this short in terms of the formatting we've got that natural language output and then for easy site building we were able to install recurring dates interactive calendars and the ability to manage time zones and we did it all in i mean really the the time spent to do the installation was was probably under a minute uh we need to run those three terminal commands and um configure the um the date field to allow recurring events and other than that it was it was really just sort of customization and you know that'll be up to you to to match exactly what you need for your particular site so with that i am going to um turn it over for any questions looking at the question tab so i think it starts yeah i'll start at the bottom since those are the the first questions here so first question curious about the edge cases with dates events that pass through a time change uh events that change time zones like an airplane flight recurring events that land on leap days so um leap days the so i guess the thing to understand about how smart date handles um all of the recurring events is it uses a um a third-party php library called recur uh with three r's two at the end and that i believe does all of the work of handling things that cross over sort of like daylight savings time or leap years or any of those kinds of things so as far as i know that's all handled pretty well by that underlying library um things like uh events that actually cross over a time zone i don't know that that's well supported but that's a pretty edge case so um if you know of a system that actually does handle that well by all means let me know because i'd be curious to know how they handle it next question is there a way to indicate if an event has been cancelled rescheduled or some other status change so we kind of saw that a little bit in the calendar in terms of um the ability to drag and drop so you're actually rescheduling an event when you do that but there's also an interface directly within the edit so if you go down here for a recurring event you have this manage instances and here's where you can see all of your different instances you could do things like say let's cancel that particular one and it'll display the overridden ones in italics with this font that's not super obvious it's putting the ones that you've canceled and strike through so again you can see when they were supposed to be um and if we wanted to we could restore that one to default so hopefully that answers that question in terms of the ability to manage those instances within recurring events next question do you have any recommendation on how to handle exhibit type events long running with irregular repeat dates and times um so that one's a tough one because i feel like if they're not uh recurring on a some kind of a regular interval you're almost better to just handle them as multi-multi-value date fields so you could go in here and say let's go add an event and because it's multi-value you can just add additional items and have keep adding them as you need them because if there's no sort of regularity in terms of how they recur then um i don't know how you you know do any kind of a useful repeat value um so that's probably how i'd approach it but uh definitely could talk after about that speaking of which there is a buff a little bit after this session and i think it's about uh 15 minutes uh talking about dates and times and drupal so happy to continue discussion in there next question why are time zones not named generically like eastern western mountain central et cetera i mean that's a good question um i was just working with sort of what was in drupal core um i i can definitely see the argument for that i know in terms of the date time specs sometimes it will actually um look for and and sort of parse the the place names or the actual sort of uh time zone codes so maybe it was done to make it more readable but that's probably more generally a question for drupal because it wasn't i would say a design decision for this solution john asks the date format stuff could be useful outside of smartdate maybe a separate contrib module so um actually the other thing that i i haven't mentioned is that the smartdate formatter and widget will work with core date fields uh the the big thing that you miss out on by not using them with um the actual smart date field type is the ability to do sort of um you know repeating dates and so on but if you just wanted the let's say in your example the output formatting that is definitely something you could do using you know a core date field and uh and just using smart date for the formatter uh duncan as so it works with views unchanged i think you said that okay that sounds like he's answered his own question uh patrick asks endless recurring dates sounds awesome my experience is that this is a very tricky thing to pull off are there any gotchas regarding this particular feature um i will i will almost answer and answer honestly and say that there are no gotchas that i'm aware of but um i i'm not sure to what extent that particular feature has been used extensively so um it would be awesome if you could use it and then um you know definitely file tickets for anything you find and and usually we try to get those resolved as quickly as possible uh shiraz asks if you override a recurring date instance say cancel a specific future recurring event the our rule spec doesn't actually allow for this correct so it wouldn't allow show up in ical import so i believe that there is something in the our rule spec around exceptions um so it it could be made to work um when you talk about it showing up in ical that's maybe a side question and in terms of are you using like views ical or um you know some other method and if whether or not that's able to pass through is probably a combination of how well the way that you've configured your recurring rule um how complex you've made it and and also the the method that you're using to to try and sync that up with ical so i feel like i haven't really answered your question but that's again kind of the the honest answer there any thoughts on how to provide icalendar or webcal outputs so there is a an issue that's being actively worked on in the views ical module around having smart dates support um so we've been sort of talking back and forth the maintainers of that module and i about trying to make sure that um that we can have a good solid integration with those two so i would say at this point that's probably your best bet um but if there's something else that you think would be a better way to to integrate those then definitely open a future request and would be happy to take a look at the level of difficulty there carson asks what might be involved in migrating from the core date field to smart date so that is an excellent question because uh as of yesterday there was a new stable release of the um 3.2 branch of smartdate and one of the big features in that 3.2 branch is a drush script that gives you the ability to uh do kind of a bulk migration of data from a core date field into a smart date field so um you know it's it's gone through some testing there was definitely some iteration in the issue where we were developing that functionality but uh if you want to try it out and again if you run into any issues happy to you know support or bug fix as needed nicole asks how would you handle recurring events that you only want to display once as a event only mondays uh situation would be within a views list for example all mondays displayed by default um so i think in the um if i understand what you're asking let's go back here and we could say for recurring values we could do something like say um zero recent instances and zero upcoming and then if we save that save that there and let's close that out and look at our recurring event you should see it'll only have that sort of text to say you know there so if it was just every monday at whatever time um you could definitely uh sort of configure it that way so hopefully that answers your question uh luke asks is there any sort of tag-based cash invalidation that happens on cron when events expire so um so the honest answer is that right now um it will add new events on chrome but there isn't actually anything right now that's doing the expiry because um honestly i was actually kind of hoping for some feedback from the community in terms of um like should we have the same kind of configuration to say how long they should be retained for before they expire um some of those kinds of things so so far um you're like maybe the second person to ask about uh expiry of events that's again if if that was something where you had a lot of events and and really needed that um it definitely could be added as a new feature um so if it's you know you want to use the module and that's something that you need to open up a feature request evans asks can you associate an event with a specific taxonomy term so you can create a view allowing users to see all upcoming events that might be a fit with interest they have expressed so yes i mean it's a it's a standard uh content type and you know like any kind of node you can have taxonomy reference fields added in there and then you could create a view you know filtered on which term they are you can also do things like in our events calendar if i can just smart i would make it easier to get there you can even do things like configure this calendar so that it will color the events um in different colors based on which uh taxonomy terms they've been tagged with i think it's don't quote me on this but i think it only works with a single vocabulary but hopefully that's robust enough to to give you some options there in terms of giving an intuitive experience to your users eric asks could you attach specific info to a recurring date such as a theme um so off the top of my head you that's probably something you could do with context it's um maybe not at the theme level but you could definitely do some customization by let's say having a different twit template for that note if that's something you needed to do you could also use layout builder and you know just restructure the layout for that particular node so there's there's a variety of different ways you could customize the output for a specific event um and hopefully you know one of those options is would line up with what you're trying to achieve um let's see patrick asks does the calendar come with the module or is it part of the date calendar module so it actually the um smartdate calendar kit that we installed for this demo actually is its own uh sorry it loads a number of other contrib modules one of them being this full calendar view that has like a completely separate maintainer so um so yeah i mean you technically could use that without any of this uh if you wanted to use some different kind of solution maybe let's say a custom calendar that you wanted to implement you definitely have that flexibility as well just at the time i was looking to integrate smart date with some kind of a calendar it seemed like full calendar view was the one that that was the best supported and and uh so far that integration has worked really well um let's see here sarah swathi uh asks can we show the calendar as a mini calendar she shows and shows full calendar um i'm sure it's possible off the top my head i i'm not sure how to do that but i'm not to be honest familiar off the top my head of how you would easily implement a mini calendar within drupal so if you have a solution um in mind that potentially could be integrated with smartdate again you know open up a feature request and would definitely take a look at that uh savannah asks how does the calendar scale for mobile um so let's actually take a look at that i think it's not terrible um but in general calendars on mobile are you know not that awesome usually so you can sort of see it crunches down the ability for a finger to be able to navigate specifically to one of those events is probably not super great um that's why typically i you know when i'm talking clients i say for sort of the public consumption of event data usually more of a list view is going to be you know more responsive more accessible all of those things actually where i think the calendar presentation really shines is in the ability to provide sort of that drag and drop capability alexander asks could you please share the link to your slides uh so i am going to post it on the session uh the organizers of drupalcon have set up sort of a dropbox system so right after this session is done i'm going to export it to a pdf put it into the dropbox and they're going to put it into the session listing so um i probably will also tweet them so um actually let's go back to here so man clues my twitter handle so i'll probably be posting those on twitter uh later on as well uh pete asks can you control say what a site editor sees versus end user can you control if they see calendar or just lists so the the calendar being a view you could definitely add you know different permissions on there um if for example you wanted um a user to um to not be able to see those i will also mention that just because as you know an editor i can drag and drop those events doesn't mean that a um a user without the proper permissions can do the same thing so let me open up an anonymous window drop that in there and you can see as an anonymous user i can click to the events but it won't let me do any kind of you know drag or anything so it really is sort of access aware um let's see i'm going to keep going until that boss starts which is a couple of minutes now eric asks this looks amazing i'm wondering if you have been able to compare with the other available recurring event solutions so uh actually recurring events is a great module um there are obviously some some very distinct differences between recurring events and smart date uh owen bush who's actually the maintainer of recurring events is going to be in that boss so um that could be a good discussion point but particularly if you need to do things like um registration for events that's that's what i would say recurring events is actually really well built for that kind of use case uh patrick asked does smart dates play well with a module like calendar link to generate.ics files so as of right now i believe there's a patch to the add to cal module to make it work with smart dates um calendar links specifically i'm not sure of but if that is something you needed again make a feature request and i would happily take a look at that i have something a bit more custom than than i would say the contrib modules i've seen um in terms of how i want to have add to calendar links but again you know a lot of what's gotten smart date to where it is right now has really been uh the community stepping up and saying these these are the things that we wanted to do like a perfect example is that ability to choose a subset of time zones that was something that somebody asked um in a session like this in the q a and i was like it doesn't do that but there's no reason it couldn't and it was it was not hard at all to implement so uh so again features like that if you need them by all means open a feature request on the module page okay i'm going to do one last one and then we'll jump off mike o'hara asks what is the best way to filter on date occurrences by say month or year basically filter on parts of dates and events so there is an open issue against views around views daytime granularity the the patch on there i've tested it and it works pretty well i feel like it's actually maybe the test that needs to get updated so that it'll pass um so right now the way to do that is to or the best way that i've found is to to um install that patch against core and then you can basically set the date filter and then say you know like match now but um you know the granularity of year and then that will give you all dates this year kind of a thing there are different ways you can do it if you can set up a view that's like specific to a month there are more custom ways that you could do it but in my experience that would be the easiest way even though it does involve patching core so i think i'm going to cap it there i'm sorry i couldn't get to everybody's question but as i say we're going to be moving over to the birds of a feather session so potentially we could pick up the conversation threads there so thanks everybody for joining us foreign

Channel: Drupal Association

Views: 457

Rating: 5 out of 5

Keywords: drupalcon, drupal

Id: QiA3Mb5DM7Y

Length: 43min 58sec (2638 seconds)

Published: Fri May 28 2021