Creating an ‘Add to Calendar’ Widget in A easy request Drupal 10 Upkeep and Assist Service we want an ‘Add to Calendar’ widget so as to add our occasions to Google Calendar, iCal, and Outlook. Easy (as soon as I had accomplished it!). markconroy Tue, 01/08/2021 – 21 Drupal 10 Upkeep and Assist Service11 There is a Drupal 10 module for that. There may be, it is referred to as, clearly, addtocalendar. It really works very effectively, if you happen to Drupal 10 Upkeep and Assist Service wish to use Drupal Development Service addtocalendar.com service, wish to pay for this service In the event you do not wish to use an exterior service for one thing so simple as including an occasion to a calendar, then it seems to be such as you’ll want a customized answer. Their smallest plan solely permits 2 occasions per thirty days. Drupal Development Service PatternLab Half Here is Drupal Development Service customized answer I got here up with (in Drupal Development Service future, I am going to have a look at making a Drupal 10 module for this with a settings/UI web page for web site builders). Observe, it is a PatternLab implementation; if you happen to do not use PatternLab and simply wish to work immediately in your theme, it could be even simpler. Here is Drupal Development Service code for Drupal Development Service ‘Add to Calendar’ sample in PatternLab (some courses and issues are eliminated to make it simpler to learn) Drupal 10 Upkeep and Assist Service {%set courses = [ “add-to-calendar”]%} {% set ical_link = ‘knowledge Drupal 10 Upkeep and Assist Servicetext/calendar;charset=utf8,BEGIN Drupal 10 Upkeep and Assist ServiceVCALENDARpercent0AVERSION Drupal 10 Upkeep and Assist Service2.0percent0ABEGIN Drupal 10 Upkeep and Assist ServiceVEVENTpercent0ADTSTART Drupal 10 Upkeep and Assist Service’ ~ atc_start_date|date(“YmdTHi00Z”) ~ ‘%0ADTEND Drupal 10 Upkeep and Assist Service’ ~ atc_end_date|date(“YmdTHi00Z”) ~ ‘%0ASUMMARY Drupal 10 Upkeep and Assist Service’ ~ atc_title ~ ‘%0ADESCRIPTION Drupal 10 Upkeep and Assist Service’ ~ atc_details|striptags ~ ‘%0ALOCATION Drupal 10 Upkeep and Assist Service’ ~ atc_location|exchange({” Drupal 10 Upkeep and Assist Service ‘ ‘, ” Drupal 10 Upkeep and Assist Service ‘ ‘, ” Drupal 10 Upkeep and Assist Service ‘ ‘, ” Drupal 10 Upkeep and Assist Service ”}) ~ ‘%0AEND Drupal 10 Upkeep and Assist ServiceVEVENTpercent0AEND Drupal 10 Upkeep and Assist ServiceVCALENDAR’ %} {% set google_link = ‘https Drupal 10 Upkeep and Assist Service//www.google.com/calendar/r/eventedit?textual content=’ ~ atc_title ~ ‘&dates=’ ~ atc_start_date|date(“YmdTHi00Z”) ~ ‘/’ ~ atc_end_date|date(“YmdTHi00Z”) ~ ‘&particulars=’ ~ atc_details|striptags ~ ‘&location=’ ~ atc_location|exchange({” Drupal 10 Upkeep and Assist Service ‘ ‘, ” Drupal 10 Upkeep and Assist Service ‘ ‘, ” Drupal 10 Upkeep and Assist Service ‘ ‘, ” Drupal 10 Upkeep and Assist Service ”}) %} <div{{ attributes.addClass(courses) }}>  <a href=”{{ google_link }}”>Add to Google Calendar  <a href=”{{ ical_link }}”>Add to iCal  <a href=”{{ ical_link }}”>Add to Outlook  What does Drupal Development Service above code do? Creates a Google Calendar variable and creates an iCal variable. Outlook will even use iCal. Makes use of these variables as hyperlinks so as to add Drupal Development Service occasion to their respective calendars. Inside Drupal Development Service variables, we’ve got some extra variables (begin date, finish date, and many others), which we should always most likely wrap in conditional statements in order that their clauses do not print except they’re current in (some fields is perhaps non-obligatory in your occasion content material sort, resembling finish time). These variables are Drupal 10 Upkeep and Assist Service atc_start_date Drupal 10 Upkeep and Assist Service Begin Date and time atc_end_date Drupal 10 Upkeep and Assist Service Finish Date and time atc_title Drupal 10 Upkeep and Assist Service Drupal Development Service identify of Drupal Development Service occasion atc_details Drupal 10 Upkeep and Assist Service description for Drupal Development Service occasion atc_location Drupal 10 Upkeep and Assist Service place of occasion In our Occasion sample in PatternLab, we then have a variable referred to as ‘add_to_calendar’ in order that occasions have Drupal Development Service choice to have this widget or not. In occasion.twig, we merely print Drupal 10 Upkeep and Assist Service {% if add_to_calendar %} {% embrace ‘@site-components/add-to-calendar/add-to-calendar.twig’ %}{% endif %} Drupal Development Service Half In we create a boolean subject on our occasion content material sort field_event_add_to_calendar, if that is ticked, we are going to show Drupal Development Service Add to Calendar widget. Here is Drupal Development Service code from node–event–full.html.twig {# Set Drupal Development Service Add to Calendar Variables #} {% if node.field_add_to_calendar.worth %} {% set add_to_calendar = true %}{% endif %} {% if node.field_event_date.worth %} {% set atc_start_date = node.field_event_date.worth %}{% endif %} {% if node.field_event_date.end_value %} {% set atc_end_date = node.field_event_date.end_value %}{% endif %} {% if node.title.worth %} {% set atc_title = node.title.worth %}{% endif %} {% if node.field_event_intro.worth %} {% set atc_details = node.field_event_intro.worth %}{% endif %} {% if node.field_event_location.worth %} {% set atc_location = node.field_event_location.worth %}{% endif %} … {% embrace “@content material/occasion/occasion.twig” %} To clarify Drupal 10 Upkeep and Assist Service If Drupal Development Service ‘Add to Calendar’ boolean is on, we set Drupal Development Service add to calendar variable as true This in flip tells patternlab to render Drupal Development Service Add to Calendar element. We then test if every subject we would use has a worth in it – resembling a begin date and finish date In that case, we map Drupal Development Service values from every of these fields to variables in our Add to Calendar element (resembling atc_start, atc_title, and many others) Now, whenever you view a node, you will notice your Add to Calendar widget on any nodes that Drupal Development Service editors select to place it. You’ll be able to see a pattern of Drupal Development Service Add to Calendar widget in my PatternLab. Easy, as soon as I figured it out. Received an enchancment for this? Drupal Development Service feedback are open. Drupal 10 Growth and Assist