I am using full calendar plug in in my lightning component and is using the same in salesforce communities
once the script is loaded i am pulling the data from task and event object and assigning it to respective div and those div i have displayed as none during page load.I have 2 buttons there and i want on 1st button click i will show div1 but it is not happening.The calendar itself is not loading.Not sure where i am missing out
component code
<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes" controller="FullCalendarController" access="global">
<ltng:require scripts="/resource/FullCalendar1/fullcalendar-3.1.0/jquery-2.2.4.js,/resource/FullCalendar1/fullcalendar-3.1.0/fullcalendar.js" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
<ltng:require styles="/resource/FullCalendar1/fullcalendar-3.1.0/fullcalendar.css"/>
<aura:attribute name="events" type="Object[]"/>
<aura:attribute name="Tasks" type="Object[]"/>
<aura:attribute name="Contacts" type="Object[]"/>
<aura:method name="sampleMethod" action="{!c.afterScriptsLoaded}"
description="Sample method with parameters">
</aura:method>
<div class="slds-col slds-medium-size--1-of-6 slds-large-size--1-of-6 back_div">
<div class="slds-tabs--default">
<ul class="slds-tabs--default__nav" role="tablist">
<div id="TAB1">
<li id="add_class_div" class="slds-tabs--default__item slds-is-active">
<a class="slds-navigation-list--vertical__action slds-text-link--reset" tabindex="0" id="tab-default-1__item" onclick="{!c.ShowEvent}" >
<p class="para_div"><div id ="assetnew1" class="assetnew_div" >Event</div> </p> </a></li>
</div>
<div id="TAB2">
<li id="add_class_div2" class="slds-tabs--default__item" role="presentation">
<a class="slds-navigation-list--vertical__action slds-text-link--reset" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-2"
id="tab-default-2__item" onclick="{!c.ShowTask}" >
<p class="para_div"><div id ="orgnew1" >Task</div></p></a></li>
</div>
<div id="TAB3">
<li id="add_class_div4" class="slds-tabs--default__item" role="presentation">
<a class="slds-navigation-list--vertical__action slds-text-link--reset" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-4"
id="tab-default-4__item" onclick="{!c.ShowTask}" >
<p class="para_div"><div id ="orgnew2">Medication</div></p></a></li>
</div>
</ul>
</div>
</div>
<div id="calendar" style="display:none;"></div>
<div id="calendar1" style="display:none;"></div>
<div id="calendar2" style="display:none;"></div>
</aura:component>
controller code
({
afterScriptsLoaded: function(cmp,evt,helper){
var events = cmp.get("v.events");
console.log('Community Calender Event is : '+events);
if(!events.length)
{
helper.fetchEvents(cmp);
}
var tasks = cmp.get("v.Tasks");
console.log('Community Calender Task is : '+tasks);
if(!tasks.length)
{
helper.fetchTasks(cmp);
}
var contacts = cmp.get("v.Contacts");
console.log('Community Calender contacts is : '+contacts);
if(!contacts.length)
{
helper.fetchcontacts(cmp);
}
},
ShowEvent : function(component, event, helper){
debugger;
document.getElementById("calendar").style.display = "block";
document.getElementById("calendar1").style.display = "none";
document.getElementById("calendar2").style.display = "none";
//debugger;
//alert('111');
var events = component.get("v.events");
console.log('Community Calender Event is : '+events);
if(!events.length)
{
helper.fetchEvents(component);
}
//alert('22');
},
ShowTask : function(component, event, helper){
document.getElementById("calendar").style.display = "none";
document.getElementById("calendar1").style.display = "block";
document.getElementById("calendar2").style.display = "none";
},
ShowContact : function(component, event, helper){
document.getElementById("calendar").style.display = "none";
document.getElementById("calendar1").style.display = "none";
document.getElementById("calendar2").style.display = "block";
},
})
//helper code
({
loadDataToCalendar :function(data){
//var ele=component.find('test').getElement();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
events:data,
eventClick: function(event) {
//alert(event.url);
console.log('event url:'+event.url);
}
});
},
loadDataToCalendar1 :function(data){
$('#calendar1').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
events:data,
eventClick: function(event) {
//alert(event.url);
console.log('event url:'+event.url);
}
});
},
tranformToFullCalendarFormat : function(component,events) {
console.log('eventArr length-->'+events.length);
var eventArr = [];
for(var i = 0;i < events.length;i++){
eventArr.push({
'id':events[i].Id,
'start':events[i].StartDateTime,
'end':events[i].EndDateTime,
'title':events[i].Subject,
'url':'/PatientPortal/s/event/'+events[i].Id
});
}
return eventArr;
},
tranformToFullCalendarFormatTask : function(component,events) {
console.log('eventArr length task-->'+events.length);
var eventArrTask = [];
for(var i = 0;i < events.length;i++){
eventArrTask.push({
'id':events[i].Id,
'start':events[i].ActivityDate,
//'end':events[i].End_Time__c,
'title':events[i].Subject
//'url':'/PatientPortal/s/event/'+events[i].Id
});
}
return eventArrTask;
},
fetchEvents : function(component) {
var action = component.get("c.getEvents");
var self = this;
action.setCallback(this, function(response) {
var state = response.getState();
if(component.isValid() && state === "SUCCESS"){
var eventArr = self.tranformToFullCalendarFormat(component,response.getReturnValue());
console.log('eventArr--->'+eventArr);
console.log('eventArr length fetch--->'+eventArr.length);
if(eventArr.length >= 0)
{
self.loadDataToCalendar(eventArr);
component.set("v.events",eventArr);
}
}
});
$A.enqueueAction(action);
},
fetchTasks : function(component) {
var action = component.get("c.getTasks");
var self = this;
action.setCallback(this, function(response) {
var state = response.getState();
if(component.isValid() && state === "SUCCESS"){
var eventArrTask = self.tranformToFullCalendarFormatTask(component,response.getReturnValue());
console.log('eventArr tasks--->'+eventArrTask);
console.log('eventArr length fetch tasks--->'+eventArrTask.length);
if(eventArrTask.length >= 0)
{
self.loadDataToCalendar1(eventArrTask);
component.set("v.Tasks",eventArrTask);
}
}
});
$A.enqueueAction(action);
}
})
it looks like on button click document.getElementById("calendar").style.display is not working.It is not able to render the full calendar.
debugger;on the 1st line below theShowEvent : functionthat would seem to be problematic.