You need to sign in to do that
Don't have an account?
Mathew Andresen 5
Lightning Calendar
Hi,
I developed a customizable ligtning calendar component. It queries event data and then puts the event subjects on the relevant days. Everything works great, except I can't get my calendar days to align properly. The days with data in them don't align with the days that don't. I put all code here in case anyone else wants a working lightning calendar
Any ideas?
I developed a customizable ligtning calendar component. It queries event data and then puts the event subjects on the relevant days. Everything works great, except I can't get my calendar days to align properly. The days with data in them don't align with the days that don't. I put all code here in case anyone else wants a working lightning calendar
Any ideas?
<!-- Calendar.cmp --> <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" controller="CalendarEvent_CLASS"> <aura:attribute name="daysOfWeek" type="String[]"/> <aura:attribute name="week1" type="String"/> <aura:attribute name="month" type="String"/> <aura:attribute name="currentMonth" type="Date"/> <aura:attribute name="pickList" type="String[]"/> <aura:attribute name="selectedDept" type="String" default="Any"/> <aura:attribute name="selectedUser" type="String" default="Any"/> <aura:attribute name="eventList" type="Event[]"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <div class="slds-grid slds-page-header" role="banner"> <!-- banner --> <div class=" slds-size--1-of-12 slds-align--absolute-center" > <lightning:buttonIcon name="back" alternativeText="Back" iconName="utility:chevronleft" onclick="{!c.lastMonth}"/> </div> <div class=" slds-size--9-of-12 slds-align--absolute-center"> <b>{!v.month} </b></div> <div class=" slds-size--1-of-12 slds-align--absolute-center" > <lightning:buttonIcon name="back" alternativeText="Back" iconName="utility:chevronright" onclick="{!c.nextMonth}"/> </div> <div class=" slds-size--1-of-12 slds-align--absolute-center" > <lightning:select name="pick" label="Department" onchange="{!c.updateDepartment}" aura:id="pickId"> <aura:iteration items="{!v.pickList}" var="item"> <option value="{!item}">{!item}</option> </aura:iteration> </lightning:select> </div> </div> <table class="slds-table slds-table--bordered slds-is-resizable" role="grid"> <thead> <tr class="slds-text-title--caps"> <aura:iteration items="{!v.daysOfWeek}" var="day"> <th class="slds-cell-shrink" scope="col" style="text-align: center;"><b>{!day}</b> </th> </aura:iteration> </tr> </thead> <tbody> {!v.body} </tbody> </table> </aura:component>
({ // Calendar - controller doInit : function(component, event, helper) { var today = new Date(); var dd = today.getDate(); var mm = today.getMonth(); //January is 0! var yyyy = today.getFullYear(); // get first day of month var today = new Date(yyyy, mm, 1); component.set("v.currentMonth", today); var selected = component.get("v.selectedDept"); helper.retrievePickList(component); helper.retrieveEventList(component, mm +1, yyyy, selected); }, // end function lastMonth : function(component, event, helper) { var currentMonth = component.get('v.currentMonth'); currentMonth = new Date(currentMonth); currentMonth = currentMonth.setMonth(currentMonth.getMonth() -1); currentMonth = new Date(currentMonth); component.set('v.currentMonth', currentMonth); var month = currentMonth.getMonth() +1; var year = currentMonth.getFullYear() ; var selected = component.get("v.selectedDept"); helper.retrieveEventList(component, month, year); }, nextMonth : function(component, event, helper) { var currentMonth = component.get('v.currentMonth'); currentMonth = new Date(currentMonth); currentMonth = currentMonth.setMonth(currentMonth.getMonth() +1); currentMonth = new Date(currentMonth); component.set('v.currentMonth', currentMonth); var month = currentMonth.getMonth() +1; var year = currentMonth.getFullYear() ; var selected = component.get("v.selectedDept"); helper.retrieveEventList(component, month, year); }, updateDepartment : function(component, event, helper) { var selected = component.find("pickId").get("v.value"); component.set('v.selectedDept', selected); console.log('result' + selected); var currentMonth = component.get('v.currentMonth'); currentMonth = new Date(currentMonth); var month = currentMonth.getMonth() +1; var year = currentMonth.getFullYear() ; helper.createCalendar(component); }, })
({ // calendar - helper retrievePickList : function(component) { var action = component.get("c.getDepartments"); // action.setParams({"month": month, "year": year}); action.setCallback(this, function(response){ var state = response.getState(); if (component.isValid() && state === "SUCCESS") { var returned =response.getReturnValue(); console.log("SUCCESS returned: " + JSON.stringify(returned)); component.set('v.pickList', returned); } }); $A.enqueueAction(action); }, retrieveEventList : function(component, month, year) { var action = component.get("c.getEventList"); action.setParams({"month": month, "year": year}); action.setCallback(this, function(response){ var state = response.getState(); if (component.isValid() && state === "SUCCESS") { var returned =response.getReturnValue(); component.set('v.eventList', returned); // console.log("SUCCESS returned: " + JSON.stringify(returned)); var that = this; that.createCalendar(component); } }); $A.enqueueAction(action); }, createCalendar : function(component) { var eventList = component.get('v.eventList'); var today = component.get('v.currentMonth'); var selectedDept = component.get('v.selectedDept'); //these are labels for the days of the week var cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; component.set('v.daysOfWeek', cal_days_labels) // these are human-readable month name labels, in order var cal_months_labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; //today = new Date(); var dd = today.getDate(); var mm = today.getMonth(); //January is 0! var yyyy = today.getFullYear(); // get first day of month var firstDay = new Date(yyyy, mm, 1); console.log(' firstday = ' + firstDay); var startingDay = firstDay.getDay(); var nextDay = new Date(firstDay); component.set('v.month', cal_months_labels[mm] + ' ' + yyyy); console.log(' starting day ' + startingDay); // find number of days in month var monthLength = new Date(yyyy, mm, 0).getDate() +1; console.log (' monthLength ' + monthLength); // compensate for leap year if (mm == 2) { // February only! if((yyyy % 4 == 0 && yyyy % 100 != 0) || yyyy % 400 == 0){ monthLength = 29; } } // **********************************************************************88 // Array of components to create var newComponents = []; // put the weeks/table rows in the components array for (var i = 0; i < 7; i++) { newComponents.push(["aura:html", { "tag": "tr" }]); } for (var i = 1; i <= startingDay; i++) { // put the days rows in the components array newComponents.push(["c:CalendarDay", { "visible": false }]); } // **********************************************************************88 // in this section, we loop through the days of the month and create components for each day for (var i = 1; i <= monthLength; i++) { // var stringBody = []; var nextDay = nextDay.toISOString().slice(0,10); // console.log('nextDay ' +nextDay); for(var e = 0; e < eventList.length; e ++) { var eventDate = new Date(eventList[e].StartDateTime); var eventDept = eventList[e].Department__c; eventDate = eventDate.toISOString().slice(0,10); // if the calendar day of the month matches the calendar day of the event, then add the subject of the event to the calendar day compeonet if (eventDate == nextDay) { if (selectedDept == 'Any') { stringBody.push(eventList[e].Subject); } else if (eventDept == selectedDept) { stringBody.push(eventList[e].Subject); } } } // end for // increament day for the date variable var nextDay = new Date(nextDay); var dateValue = nextDay.getDate() + 1; nextDay.setDate(dateValue); newComponents.push(["c:CalendarDay", { "day": i, "toDoItems": stringBody }]); } for (var i = 1; i <= 5; i++) { // put the days rows in the components array newComponents.push(["c:CalendarDay", { "visible": false }]); } // **********************************************************************88 $A.createComponents(newComponents, function (components, status, errorMessage) { if (status === "SUCCESS") { var pageBody = component.get("v.body"); pageBody = []; for (var outer = 0; outer < 5; outer ++) { var tr = components[outer]; var trBody = tr.get("v.body"); for (var inner = 1; inner < 8; inner ++) { var outerAdj = outer +0; var adj = 6 + + inner + (7 * outerAdj); var toDay = components[adj]; trBody.push(toDay); } tr.set("v.body", trBody) pageBody.push(tr); } component.set("v.body", pageBody); } // end success else // Report any error { this.displayToast("Error", "Failed to create list components."); } } // end callback function ); // end create component } })
<!-- CalendarDay.cmp --> <aura:component > <aura:attribute name="day" type="String"/> <aura:attribute name="visible" type="Boolean" default="true"/> <aura:attribute name="toDoItems" type="String[]"/> <td class = "outline" scope="col" > <aura:if isTrue="{!v.visible}"> <fieldset class="slds-box slds-theme--default "> <table class="subtable" style="vertical-align:top"> <thead> <tr > <th class="thClass"> {!v.day} </th> </tr> </thead> <tbody> <aura:iteration items="{!v.toDoItems}" var="item"> <tr><td >{!item} </td></tr> </aura:iteration> </tbody> </table> </fieldset> </aura:if> </td> </aura:component>
/* calendarDay.css */ .THIS.outline { border: solid black 1px; float: top; } .THIS .thClass { vertical-align:top; text-align: center; } .THIS .subtable { vertical-align:top; position: relative; }
I found this thread looking for a lightning calendar, i would love to give yours a try but i have no idea where to even begin.
Would you mind giving me a hand?
Thanks
Can you share the controller code "CalendarEvent_CLASS"?
Can you please share the controller code "CalendarEvent_CLASS"?
Can you please share the controller code "CalendarEvent_CLASS"?
Can you please share the controller code "CalendarEvent_CLASS" as well?