No Results
How to Create Calendar Visualization
Article Contents

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
×