Daily Schedule Widget | Axero Documentation

Create a widget that lists your events for the day. Events drop off the widget as the day progresses. Use this widget to help people stay organized and on time.

Add Dynamic Property

1. Click the gear icon > Control Panel > System > Dynamic Properties.
2. Click  Add Category.
3. Enter Page Builder Content as the Name.
4. Click Save.
   
   (NOTE: For the below steps, If this widget will be used in a space versus for the Top Level Community you will need to add it to Manage Space >Dynamic Properties>Add Dynamic Property for it to be available in the space level)
5. Click Add Dynamic Property.
6. Enter Daily Schedule Widget as the Property Name.
7. Select Page Builder Content as the Category.
8. In the rich editor toolbar, click the <> code editor button.
9. In the editor, paste the following code.

   <ul id="daily-agenda-list"></ul>
   <p>
       <script>
           var dailyAgendaLoading = true;
           var eventStrs = [];
   
           var rightNow = new Date();
           rightNowISO = getISOString(rightNow);
   
           var tomorrow = new Date();
           tomorrow.setDate(tomorrow.getDate() + 1);
           tomorrow.setHours(0, 0, 0, 0);
           tomorrowISO = getISOString(tomorrow);
   
           //Get personal events
           $.ajax({
               type: "GET",
               url: `/api/calendars/events?SpaceID=0&EventViewSource=3&StartDateISO=${rightNowISO}&EndDateISO=${tomorrowISO}`,
               contentType: "application/json; charset=utf-8",
               success: function(response) {
                   processEvents(response.ResponseData);
               }
           });
   
           //Get space events
           $.ajax({
               type: "GET",
               url: "/api/spaces/me?pageLength=200",
               contentType: "application/json; charset=utf-8",
               success: function(response) {
                   for (var j = 0; j < response.ResponseData.length; j++) {
                       var currSpace = response.ResponseData[j];
                       $.ajax({
                           type: "GET",
                           url: `/api/calendars/events?SpaceID=${currSpace.SpaceID}&EventViewSource=2&StartDateISO=${rightNowISO}&EndDateISO=${tomorrowISO}`,
                           contentType: "application/json; charset=utf-8",
                           success: function(response) {
                               processEvents(response.ResponseData);
                           }
                       });
                   }
               }
           });
   
           function processEvents(eventsArg) {
               for (var i = 0; i < eventsArg.length; i++) {
                   currEvent = eventsArg[i];
                   if (currEvent.AttendanceType == 1) { //Going
                       currEventDate = new Date(currEvent.StartDate);
                       var month = currEventDate.toLocaleString('default', {
                           month: 'short'
                       });
                       var day = currEvent.StartDateISO.split("-")[2].split("T")[0];
                       var str = `<li><a href="${currEvent.EventURL}"><div class="calendar-wrap"><div class="calendar"><span class="month">${month}</span><span class="day">${day}</span></div></div><div class="event-info"><div class="title">${currEvent.Title}</div><div class="property">${currEvent.StartTimeText} <i class=\"icon-long-arrow-right\"></i> ${currEvent.EndTimeText}</div><div class="property">${currEvent.Location}</div></div></a></li>`;
                       eventStrs.push([currEvent.StartDateISO, str]);
                   }
               }
           }
   
           function sortFunction(a, b) {
               if (a[0] === b[0]) {
                   return 0;
               } else {
                   return (a[0] < b[0]) ? -1 : 1;
               }
           }
   
           function getISOString(givenDate) {
               givenDateISO = givenDate.getFullYear() + "-";
   
               if (givenDate.getMonth() < 9) givenDateISO += "0" + (givenDate.getMonth() + 1);
               else givenDateISO += (givenDate.getMonth() + 1);
               givenDateISO += "-";
   
               if (givenDate.getDate < 10) givenDateISO += "0" + givenDate.getDate();
               else givenDateISO += givenDate.getDate();
               givenDateISO += "T";
   
               if (givenDate.getHours() < 10) givenDateISO += "0" + givenDate.getHours();
               else givenDateISO += givenDate.getHours();
               givenDateISO += ":";
   
               if (givenDate.getMinutes() < 10) givenDateISO += "0" + givenDate.getMinutes();
               else givenDateISO += givenDate.getMinutes();
               givenDateISO += ":";
   
               if (givenDate.getSeconds() < 10) givenDateISO += "0" + givenDate.getSeconds();
               else givenDateISO += givenDate.getSeconds();
   
               givenDateISO += ".000Z";
   
               return givenDateISO;
           }
   
           $(document).ajaxStop(function() {
               if (dailyAgendaLoading) {
                   eventStrs.sort(sortFunction);
                   for (var i = 0; i < eventStrs.length; i++) {
                       $("#daily-agenda-list").append(eventStrs[i][1]);
                   }
                   dailyAgendaLoading = false;
               }
           });
       </script>
   </p>

10. Click OK.
11. Click Save.

Add Template

1. Click System > Page Builder Templates.
2. Click Add a new template.
3. Enter Dynamic Property (No content class) as the Template Name.
4. Select Dynamic Property as the Widget Type.
5. Paste the following code in the editor.

   <div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
   
       {{#if ShowWidgetHeader}}
       <div class="axero-widget-header">
           <h3>{{{WidgetTitle}}}</h3>
       </div>
       {{/if}}
       
       <div>
         {{{Contents}}}
       </div>
       
       {{#if ShowWidgetFooter}}
       <div class="axero-widget-footer">
   		{{{FooterHTML}}}
       </div>
       {{/if}}
       
   </div>

6. Click Save Template.

How to Use the Widget

1. In the Control Panel, click System > Page Builder.
2. Add or edit a page.
3. Click the Layouts tab and add a layout onto the page.
4. Click Widgets.
5. Add a Dynamic Property widget onto the page.
6. On the Dynamic Property widget, click the gear icon > Edit properties.
7. Update the widget Title.
8. In Choose a space, select Top level community.
9. In Choose a property, select Daily Schedule Widget.
10. Click Template.
11. Select Dynamic Property (No content class).
12. Click Advanced.
13. In Custom CSS class, enter axero-widget-events .
14. Click Save Widget.
15. Click Publish changes.
16. Click Go to page.