No Results
How to Create Calendar Visualization

If you want to display a calendar on a page, you may do so in a few different ways.

Creating an HTML date picker

Take the following steps:

  1. In the pipeline, find any feed (for example, a CSV) and click the gear icon > + > New Visualization.
    A pop-up is displayed.
  2. Select HTML Template.
    A new window is displayed.
  3. Provide a name for the visualization (for example, Calendar).
  4. Go to the Renderer tab > HTML and paste the following code:
    <form class="form-inline">
      <div class="form-group">
        <div class="input-group">
          <p>Date: </p>
          <input class="form-control" placeholder="yyyy-mm-dd"
                 name="dp" [(ngModel)]=model ngbDatepicker #d="ngbDatepicker">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"><i class="fa fa-calendar"></i></button>
          </div>
        </div>
      </div>
    </form>
  5. Go to Preview to view the end result.

    To open an interactive calendar in a small overlay click the calendar icon.

    To close the calendar, choose a date, click elsewhere on the page, or hit the Esc key.

 

Creating an HTML datetime picker

edgeCore version: 4.5.0

  1. Repeat steps 1-3 outlined above.
  2. In Renderer  > HTML paste the following code:
    <!-- jsCalendar v1.4.4 Javascript and CSS from unpkg cdn -->
    <div class='container'>
      <div class='calendar-header'>
        <div class='calendar-clock'>
          <h6 id='clock'></h6>
          <!-- target jsCalendar element -->
          <div id="calendar"></div>
        </div>
      </div>
      <div class='calendar-events'>
        <!-- <div class='event' *ngFor="let row of rows"><strong><span>{{row.SUMMARY}}</span></strong>&nbsp;-&nbsp;<span>{{row.CATEGORIES}}</span>&nbsp;
                <strong><span>@&nbsp;{{row.LOCATION}}</span></strong>&nbsp;-&nbsp;<span>{{row.CLASS}}</span><br><span>Created:&nbsp;{{row.CREATED | date:long}}</span><hr><span>Starts at:&nbsp;{{row.DTSTAMP | date:'long' }}</span><br><span>Repeats: <strong>{{row.RRULE||'FREQ=No' | slice : 5 | titlecase }}</strong></span><br><div class='event-desc'><span>{{row.DESCRIPTION}}</span></div></div>-->
        <div id="date-container"> Selected date is: </div>
      </div>
    </div>
  3. In Renderer  > JavaScript paste the following code:
    function refreshData() {
    	var time = moment().format('MMMM Do YYYY HH:mm Z');
    
    	$('#clock').text(time);
    
    	setTimeout(refreshData, 1000);
    }
    
    
    refreshData(); // execute function
    
    function init() {
    	component.loadResources(['https://unpkg.com/simple-jscalendar@1.4.4/source/jsCalendar.min.js', 'https://unpkg.com/simple-jscalendar@1.4.4/source/jsCalendar.min.css']).then(() => {
    		//console.log('resources have been loaded and can now be used');
    		// Please note, the then() function will be called every time the visualization
    		// is initialized, despite if the script has previously been loaded.
    
    		jsCalendar.new("#calendar", "now", {
    			monthFormat: "month YYYY",
    			dayFormat: "DDD"
    		}).onDateClick(function(event, date) {
    			// console.log('Date: ', date);
    			$('#date-container').text("Selected date is: " + date.toString());
    		});
    
    	});
    }
    // ... any additional javascript or functions ...
    init();
  4. In Renderer  > CSS paste the following code:
    .container {
         display: block;
         height: 100%;
         width: 100%;
         margin: 0px;
         padding: 0px;
         overflow: auto;
         max-width: unset;
    }
     .calendar-header {
         display: block;
         width: 315px;
         transition:all 0.4s;
         height: 32px;
         border-radius: 0px 0px 5px 0px;
         background: #f2f2f2;
         box-shadow: 0px 0px 5px gray;
         padding: 8px;
         position: absolute;
         top: 0;
         left: 0;
         color: dimgray;
         z-index: 100;
         h3 {
             margin: 0px;
             margin-bottom: 0;
             font-weight: 500;
             line-height: 1.6;
        }
         .calendar-clock {
             display: block;
             width: 100%;
        }
         #clock {
             margin-bottom: 0px;
        }
         .jsCalendar table {
             display:none;
             opacity:0;
             height:0px;
             background-color: #f2f2f2;
             border-collapse: collapse;
             border-radius: 3px;
             box-shadow: none;
             color: #696969;
             font-family: Tahoma, Geneva, sans-serif;
             margin: 5px;
             transition:all 0.4s;
             box-shadow:0px 0px 4px gray;
        }
    }
     .calendar-header:hover {
         .jsCalendar table {
             display:block;
             opacity:1;
             height:auto;
        }
    }
     .evt-count {
         color: gray;
         font-size: small;
    }
     .calendar-events {
         padding: 10px;
         overflow: auto;
         width: 100%;
         height: 100%;
         padding-top: 42px;
         .event {
             display: block;
             width: 96%;
             margin: 2% 2%;
             background: #f2f2f2;
             box-shadow: 0px 0px 2px lightgray;
             border-radius: 5px;
             border: solid 1px #cccccc;
             transition: all 0.2s;
             padding: 10px;
        }
         .event-desc {
             padding: 10px;
             width: 100%;
             height: auto;
             background: white;
             margin-top: 10px;
             border-radius: 4px;
             box-shadow: 0px 0px 2px gray inset;
        }
         hr {
             margin: 2px;
        }
         .event:hover {
             cursor: pointer;
             transform: scale(1.05);
             box-shadow: 0px 0px 20px dimgray;
        }
    }
     .calendar-events::-webkit-scrollbar {
         display: none;
    }
     .calendar-events {
         -ms-overflow-style: none;
        /* IE and Edge */
         scrollbar-width: none;
        /* Firefox */
    }
     .jsCalendar tbody td.jsCalendar-current {
         background-color: #808080;
         border-radius: 18px;
         color: #fff;
    }
    
  5. Click Save and Close and add the HTML visualization to a page.

 

Creating an HTML Google-like Calendar

edgeCore version: 4.5.0

  1. Download the Calendar extension and the calendar csv file.
  2. Go to system menu > Extensions.
  3. Upload the calendar extension you downloaded in step 1.
  4. Click Activate.
  5. When the extension is activated, go to your pipeline and create a CSV feed from any connection.
  6. Upload the calendar csv file you downloaded in step 1 and provide a name for the feed.
  7. Go to the Preview tab and click Save.
  8. Create an HTML Template off of that feed.
  9. Provide a name and go to the Renderer tab.
  10. In HTML, paste the following code:
    <div id="calendar-container">
      <form #f="ngForm">
        <!--
        <input type="date" name="calendarDateInput" onchange="setDate($event)" />
    	-->
        <!-- ngbDatePicker -->
        <div class="calendar-header__inputs">
          <div class="calendar-date__input">
            <label for="calendarDateInput">Date:</label>
          	<input id="dateInput" type="date" name="calendarDateInput" (change)="setDate($event)" />
          </div>
          <mat-form-field appearance="none" id="agency-form__input" >
            <mat-label>-- Select Agency --</mat-label>
            <mat-select class="select_form_inputs" name="agencySelectField" [(ngModel)]="selectedAgency" (selectionChange)="onSelection($event)">
              <mat-option *ngFor="let agency of agencies" [value]="agency.value">{{agency.label}}</mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field appearance="none" id="location-form__input" >
            <mat-label>-- Select Location --</mat-label>
            <mat-select class="select_form_inputs" name="locationSelectField" [(ngModel)]="selectedLocation" (selectionChange)="onSelection($event)">
              <mat-option *ngFor="let loc of locations" [value]="loc.value">{{loc.label}}</mat-option>
            </mat-select>
          </mat-form-field>
          <button type="reset" id="reset-btn" (click) ="agency= ''; location='';">Reset</button>
        </div><!-- .form-group -->
      </form>
      <div id="calendar-controls">
        <div class="controls-group">
          <button (click)="setView('month')">month</button>
          <button (click)="setView('week')">week</button>
          <button (click)="setView('day')">day</button>
        </div>
        <div class="font-large">{{ currentDate }}</div>
        <div class="controls-group">
          <button (click)="setToday()">today</button>
          <button (click)="goPrev()">&#60;</button>
          <button (click)="goNext()">&#62;</button>
        </div>
      </div>
      <div id="softility-calendar" style="height: 800px;"></div>
    </div>
  11. In JavaScript, paste the following code:
    console.log(component.widgetID);
    const formFieldEl = document.querySelector(`#${component.widgetID} mat-form-field#agency-form__input.mat-form-field.mat-form-field-appearance-outline`);
    console.log(formFieldEl);
    /*
    const Months = {
      0: "January",
      1: "February",
      2: "March",
      3: "April",
      4: "May",
      5: "June",
      6: "July",
      7: "August",
      8: "September",
      9: "October",
      10: "November",
      11: "December",
    };
    */
    component.currentDate = "";
    component.selectedValue = {
      agency: "",
      location: ""
    };
    component.selectedAgency = "";
    component.selectedLocation = "";
    let calendar;
    let calendarEvents = [];
    component.agencies = [
      {label:'PSAC', value: 'PSAC'},
      {label:'PSAC-DCAS', value: 'PSAC-DCAS'},
      {label:'PSAC-NYPD', value: 'PSAC-NYPD'},
      {label:'PSAC-FDNY', value: 'PSAC-FDNY'}
    ];
    component.locations = [
      {label:'PSAC1', value: 'PSAC1'},
      {label:'PSAC2', value: 'PSAC2'},
      {label:'SDE', value: 'SDE'},
    ];
    component.onSelection = (ngEvent) => {
      //console.log("Angular event: ", ngEvent.source.ngControl);
      const {value} = ngEvent.source.ngControl.control;
      if (ngEvent.source.ngControl.name === "agencySelectField") {
      	component.selectedValue.agency = value;
      }
      if (ngEvent.source.ngControl.name === "locationSelectField") {
      	component.selectedValue.location = value;
      }
      console.log("Selected value (inside fn): ", component.selectedValue);
      component.setPageVars({ 'agency': component.selectedValue.agency, 'location': component.selectedValue.location });
    };
    function getNavbarRange(tzStart, tzEnd, viewType) {
      var start = tzStart.toDate();
      var end = tzEnd.toDate();
      var middle;
      if (viewType === 'month') {
        middle = new Date(start.getTime() + (end.getTime() - start.getTime()) / 2);
        return window.moment(middle).format('MMMM YYYY');
      }
      if (viewType === 'day') {
        return window.moment(start).format('YYYY-MM-DD');
      }
      if (viewType === 'week') {
        return window.moment(start).format('YYYY-MM-DD') + ' ~ ' + window.moment(end).format('YYYY-MM-DD');
      }
      throw new Error('no view type');
    }
    function displayRenderRange() {
      var rangeStart = calendar.getDateRangeStart();
      var rangeEnd = calendar.getDateRangeEnd();
      component.currentDate = getNavbarRange(rangeStart, rangeEnd, calendar.getViewName());
    }
    function update() {
      displayRenderRange();
    }
    function init() {
      component.loadResources(['softility-calendar/tui-calendar.min.js','softility-calendar/tui-calendar.min.css'])
      .then(() => {
        console.log('resources have been loaded and can now be used');
        // Please note, the then() function will be called every time the visualization
        // is initialized, despite if the script has previously been loaded.
        const container = document.getElementById("softility-calendar");
        calendar = new window.tui.Calendar(container, {
          usageStatistics: false,
          calendars: [{
            id: 'softility-calendar',
            name: 'Softility'
          }],
          defaultView: 'month',
          week: {
            startDayOfWeek: 1
          },
          month: {
            startDayOfWeek: 1
          }
        });
        component.currentDate = window.moment(new Date(calendar.getDate())).format("MMMM YYYY");
        component.setView = (viewDate) => {
          calendar.changeView(viewDate);
        };
        component.setToday = () => {
          calendar.today();
          update();
        };
        component.goNext = () => {
          calendar.next();
          update();
        };
        component.goPrev = () => {
          calendar.prev();
          update();
        };
        component.setDate = (_ev) => {
          //console.log("Event: ", _ev.target.valueAsDate);
          calendar.setDate(_ev.target.valueAsDate);
          update();
        };
        return calendar;
      })
      .then((_cal) => {
        //console.log("Calendar: ", _cal);
        const mySubscription = component.rows$.subscribe(rows => {
          for (const row of rows) {
            const calEvent = {
              id: row.ChangeID,
              calendarId: _cal.container.id,
              title: row.Summary,
              start: window.moment(new Date(row.Start_Date)).format(),
              end: window.moment(new Date(row.End_Date)).format(),
            };
            calendarEvents.push(calEvent);
          }
          _cal.createEvents(calendarEvents);
        });
        component.onDestroy = () => {
          mySubscription.unsubscribe();
        };
      });
    }
    init();
    component.onDataChanged = (rows) => {
      console.log("Data changed!:\n", rows);
      calendarEvents = [];
      calendar.clear();
      for (const row of rows) {
        const calEvent = {
          id: row.ChangeID,
          calendarId: calendar.container.id,
          title: row.Summary,
          start: window.moment(new Date(row.Start_Date)).format(),
          end: window.moment(new Date(row.End_Date)).format(),
        };
        calendarEvents.push(calEvent);
      }
      calendar.createEvents(calendarEvents);
    };
  12. In CSS, paste the following code:
    #calendar-container {
      height: 100%;
      overflow: auto;
      padding: 15px;
    }
    .font-large {
      font-size: 24px;
    }
    #calendar-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 15px;
      padding-bottom: 15px;
      font-size: 16px;
      .controls-group {
        button {
          background-color: orange;
          border-radius: 3px;
          color: black;
          margin-right: 5px;
          padding: 5px;
          border: none;
          min-width: 50px;
        }
      }
    }
    .calendar-header__inputs {
      display: flex;
      align-items: center;
    }
    #dateInput{
      border: 1px solid #DC9108;
      height: 3rem;
      border-radius: 5px;
      width:13rem;
      margin-left:0.5rem;
      padding-left:0.7rem;
      padding-right:0.7rem;
    }
    #calendar-inputs{
       display:flex;
       justify-content:flex-start;
       align-items:center;
    }
    #agency-form__input{
      border-radius: 5px;
      margin-right:0.5rem;
      margin-left:1rem;
      margin-top:15px;
      .mat-form-field-label {
      	top: 2.25rem;
      }
    }
    #location-form__input{
      border-radius: 5px;
      margin-right:1rem;
      margin-left:1rem;
      margin-top:15px;
      .mat-form-field-label {
      	top: 2.25rem;
      }
    }
    .select_form_inputs{
      border: 1px solid #FFA500;
      border-radius: 5px;
      height:3rem;
      padding: 13px;
    }
    #reset-btn{
        background-color: orange;
        border-radius: 3px;
        color: black;
        padding: 5px;
        border: none;
        min-width: 80px;
        min-height:35px;
    }
  13. Go to the Preview tab and observe the calendar.
  14. Save the HTML visualization and add it to a page.

Terms | Privacy