I am creating a page using the FullCalendar.io library to display events on a webpage.
Now as the user navigates between between date ranges I want to load the events dynamically. Using the documentation I'm able to add the new events when the user presses the "next" button, however it simply appends the events to the existing events Object, what I want to do is remove any existing events and only display the new list. How can I do this?
You can view the functionality here on my CodePen.
HTML
<p>
<button id='prev'>prev</button>
<button id='next'>next</button>
</p>
<div id='calendar'></div>
JS
var calendar;
var eventsList = [{
id: '1',
title: 'event 1',
start: '2019-04-06'
},
{
id: '2',
title: 'event 2',
start: '2019-04-07'
},
{
id: '3',
title: 'event 3',
start: '2019-04-29'
},
{
id: '4',
title: 'event 4',
start: '2019-04-30'
}];
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
timeZone: 'UTC',
defaultView: 'dayGridMonth',
header: {
left: '',
center: 'title',
right: ''
},
editable: true,
events: eventsList
});
calendar.render();
});
document.getElementById('prev').addEventListener('click', function() {
calendar.prev(); // call method
});
document.getElementById('next').addEventListener('click', function() {
// replace existing list - this will doneby another function, hard coding for demo
eventsList = [{
id: '5',
title: 'event 5',
start: '2019-05-06'
},
{
id: '6',
title: 'event 6',
start: '2019-05-07'
},
{
id: '7',
title: 'event 7',
start: '2019-05-08'
},
{
id: '8',
title: 'event 7',
start: '2019-05-09'
}];
calendar.next(); // call method
calendar.addEventSource(eventsList);
//calendar.refetchEvents(); // using this instead of the line above does not work either, just loads original list
});
I misread the document, getEventSource returns an array of eventSource, so just simply point index and then remove should work.
calendar.getEventSources()[0].remove();
or if you have multiple resources,
calendar.getEventSources().forEach(eventSource => {
eventSource.remove()
})
Code below is mistaken, left for the record.
How about adding remove() before you add event source.
calendar.next(); // call method
calendar.getEventSources().remove();
calendar.addEventSource(eventsList);
//calendar.refetchEvents(); // this does not work either, just loads original list
https://fullcalendar.io/docs/Calendar-getEventSources
https://fullcalendar.io/docs/EventSource-remove
Related
I want to customize my mind map using jsMind
Currently this is my code:
var mind = { meta: {
name: 'jsMind remote',
author: 'hizzgdev#163.com',
version: '0.2',
},
format: 'node_tree',
data: {
id: 'root',
topic: 'jsMind',
children: [
{
id: 'easy',
topic: 'Easy',
direction: 'left',
children: [
{ id: 'easy1', topic: 'Easy to show' },
{
'id': 'other3',
'background-image': 'ant.png',
'width': '100',
'height': '100',
},
],
},
{
id: 'open',
topic: 'Open Source',
direction: 'right',
children: [
{
'id': 'open2',
'topic': 'BSD License',
'leading-line-color': '#ff33ff',
},
],
}
};
_jm.show(mind);
Any ideas to complete this challenge are welcome.
I tried to execute in the browser but i don't know how to implement that i wanted to do.
EDITED
I have changed the code a made a new line perfectly but a tooltip doesn't appear.
jsMind does not provide a built-in mechanism to display tooltip, but the topic of node can be HTML, so would you like to have a try to add a tooltip to it with HTML? Like that:
var mind = {
// ...
data: {
id: 'root'
topic: '<span title="good">jsMind Example<span>'
}
// ...
}
screenshot of it
Regarding this and this Question, Id like to know, if this can be redone with a working solution on fiddle? Seems like theres no such things as 'isMultipleDay' or 'multipleDayEvents'.
$('#calendar').fullCalendar ({
defaultView:'month',
defaultDate: '2014-11-20',
timezone: 'local',
events: [ {
title: "Birmingham Comic Con",
start: new Date('2014-11-20T09:00'),
end: new Date('2014-11-22T19:00'),
id: 1,
isMultipleDay: true,
multipleDayEvents: [{
start: new Date('2014-11-12T09:00'),
end: new Date('2014-11-15T19:00'),
description: 'Day 1'
},
{
start: new Date('2014-11-16T09:00'),
end: new Date('2014-11-18T19:00'),
description: 'Day 2'
},
{
start: new Date('2014-11-02T09:00'),
end: new Date('2014-11-05T19:00'),
description: 'Day 3'
}
]
}]
})
function AddEvent(){
$('#calendar').fullCalendar('renderEvent', ourEvent, true);
}
http://jsfiddle.net/duu0dx2t/1035/
Thanks for your support ADyson. Ive build my own repeater and duplicated those events with several dates and it works as desired :)
Right so I have a dilemma, that seems like a simple question but I can't figure it out.
I have a nested array:
$scope.rootItem = {
id: '1',
type: 'course',
title: 'Adobe Photoshop CC for beginners',
items: [{
id: '2',
type: 'label',
title:'Label Title',
items:[{
id: '3',
type: 'module',
title:'Module title',
items: [{
id: '4',
type: 'topic',
title:'Topic title',
items: [{
id: '5',
type: 'content',
title:'Content title'
}, {
id: '6',
type: 'content',
title:'Content title'
}]
}]
},{
id: '7',
type: 'resources',
title:'Resources'
},{
id: '8',
type: 'module',
title:'Module title',
items: [{
id: '9',
type: 'topic',
title:'Topic',
items: [{
id: '10',
type: 'question',
title:'Question title'
}]
}, {
id: '11',
type: 'topic',
title:'Topic title',
items: [{
id: '12',
type: 'content',
title:'Content title'
}]
}]
}]
},{
id: '14',
type: 'assessmentLabel',
title: 'Assessment Label',
items: [{
id: '15',
type: 'assessment',
title: 'Assessment Title',
items: [{
id: '16',
type: 'courseAssessment',
title: 'Course Assessment Question',
items: []
}]
}]
}]
};
That is outputted using ng-repeat. All works great there, by the way it is also sortable using ng-sortable (based on JQuery UI Sortable).
What I'm trying to do is duplicate lets say id: 5 using angular.copy().
HTML:
<a href="" title="Duplicate Content" data-ng-click="duplicate(ngModelItem, $parent.ngModelItem.items)">
<span class="icon-duplicate"></span>
</a>
That seems to work fine too. I'm able to pass the object to the function.
The problem arises when I try and push that object to its parents array. I read about $parent and what I think would make sense is passing $parent.ngModelItems.items to the ng-click as such:
data-ng-click="duplicate(ngModelItem, $parent.ngModelItem.items)"
Which to me makes sense, pass parents ngModelItem.items (items is array that ID:5 is part of). But I can't figure out why do I get $parent.ngModelItem.items as undefined.
This is my controller:
$scope.duplicate = function(item, parent) {
var itemCopy = angular.copy(item);
parent.push(item);
};
HTML ng-repeat:
<ul class="apps-container" ui-sortable="sortableOptions" ng-model="ngModelItem.items" ng-class="ngModelItem.type">
<li class="innerCont" ng-repeat="innerItem in ngModelItem.items">
<tg-dynamic-directive ng-model="innerItem" tg-dynamic-directive-view="getView">
</tg-dynamic-directive>
</li>
</ul>
But angular seems to have different ideas. So I guess my question is how can I pass parents ngModelItem.items (rootItem.items) so that I can access that array?
Can someone please explain why {{$parent.$parent.ngModelItems.id}} returns correct parent id. Yet when I try to pass that parent to the function such as
data-ng-click="duplicate(parent.parent.ngModelItem.items)"
It doesnt work
Directive below:
angular.module('tg.dynamicDirective', [])
.directive('tgDynamicDirective', ['$compile',
function($compile) {
'use strict';
function templateUrlProvider(getView, ngModelItem) {
if (getView) {
if (typeof getView === 'function') {
var templateUrl = getView(ngModelItem) || '';
if (templateUrl) {
return templateUrl;
}
} else if (typeof getView === 'string' && getView.length) {
return getView;
}
}
return '';
}
return {
restrict: 'E',
require: '^ngModel',
scope: true,
template: '<div ng-include="templateUrl"></div>',
link: function(scope, element, attrs, ngModel) {
scope.$watch(function() {
var ngModelItem = scope.$eval(attrs.ngModel);
var getView = scope.$eval(attrs.tgDynamicDirectiveView);
scope.ngModelItem = ngModelItem;
return templateUrlProvider(getView, ngModelItem);
}, function(newValue, oldValue) {
scope.templateUrl = newValue;
});
}
};
}
]);
After few hours of trying to fix this, and reading numerous articles about $scope inheritance I found out that ng-if create new scope using prototypical inheritance. Which I was not accounting for.
Which required me to insert one more $parent when passing it to the function as such:
data-ng-click="duplicate(ngModelItem, $parent.$parent.$parent.ngModelItem)"
and then in the controller do something like this:
$scope.duplicate = function(item, parent) {
var itemCopy = angular.copy(item);
var parentArray = parent.items;
parentArray.push(itemCopy)
};
Hope this will save someone hours of work, whoever runs into this problem.
Hi extjs experts i have a simple question, but cant find the correct way to do it and was googling in for few days now. I have a listener inside config of extjs elements, it is easy to do it in this way, but how i could take the listener out of the config, and put it outside the config so config will be as minimum as possible and one listener can be used for many times just true the function call,
here is my code:
Ext.define("my.filter.TimeFilter",{
extend: "Ext.tab.Panel",
alias: "widget.myTimeFilter",
requires: ["my.filter.Filters"],
config: {
cls: 'ruban-filter-timefilter',
items: [
{
title: 'Time sections',
xtype: 'radiogroup',
fieldLabel: 'Time Selector',
items: [
{
boxLabel: '60 Mins',
name: 'unixMills',
inputValue: '3600000'
}, {
boxLabel: '8 Hours',
name: 'unixMills',
inputValue: '28800000'
}, {
boxLabel: '24 Hours',
name: 'unixMills',
inputValue: '86400000'
}, {
boxLabel: '7 Days',
name: 'unixMills',
inputValue: '604800000'
}, {
boxLabel: '30 Days',
name: 'unixMills',
inputValue: '2592000000'
}
],
listeners: {
change: function (field, newValue, oldValue) {
var endTime = new Date().getTime();
var startTime = endTime - newValue['unixMills'];
console.log("StartTime: " + startTime);
console.log("EndTime: " + endTime);
}
}
]
},
constructor: function(config){
this.callParent(arguments);
}
});
so i believe it should go after constructor as separate function or as listener itself, but i dont know, not so well familiar with js and extjs,
thanks everyone
You can add a listener outside of the config this way:
myElement.on('change', function () { ... }
There are quite a lot of possibilities.
If you have a lot of logic based on events, you can always create a controller and have them listen to the components. The controller documentation here should give you a pretty good idea of how to tie it together: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.app.Controller
I am very much beginner to Sencha Touch. I want to display a static list to the screen. The code I tried is from sencha docs guides 'using list'. However, blank screen appears when compiled and run. Do I have to add the list to the Viewport? What am I missing? Please help.
My code is:
Ext.application({
launch: function () {
Ext.create('Ext.List', {
store: {
fields: ['name'],
data: [
{ name: 'A' },
{ name: 'B' },
{ name: 'C' },
{ name: 'D' }
]
},
itemTpl: '{name}'
});
}
});
May be this one help you
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
});
Sorry! My bad. I made it with a little bit of work.
I just did this:
launch: function() {
var list = Ext.Create('Ext.List',{..
.....
.....
itemTpl = '{name}'
});
Ext.Viewport.add(list);
}