We Keep Coding

How to add tooltip in a node using jsMind library?

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

How to replace all events in FullCalendar library

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

Full Calendar events not displaying from database in Handlebars Express js

I'm injecting the data into the handlebars calendar page via event as shown in the controller bellow
router.get('/', function(req, res, next) {
Event.find().then((events) => {
console.log(events);
res.render('calendar', { title: 'Calendar', calendarlink: true, event: events });
}, (err) => {
res.status(400).send(err);
})
});
The data is showing in the console log but I cannot get it to display on the calendar.hbs
this is the code for the calendar hbs
$('#calendar').fullCalendar({
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'prev,next today'
},
firstDay: 1, // 1(Monday) this can be changed to 0(Sunday) for the USA system
defaultView: 'month',
themeSystem: 'bootstrap3',
events: {{event}},
eventRender: function(event, element) {
element.find('.fc-title').append("<br/> " + event.description);
$(element).tooltip({
title: "Description: " + event.description
});
}
})
The event option looks like this with the rendered JSON:
events: {
_id: 5a0757fa94aad82784cbf8a1,
title: 'SampleEvent',
start: 2017-11-11T22:34:00.000Z,
end: 2017-11-15T07:00:00.000Z,
address: 'Paris HQ, LA',
description: 'Get ready to live a moment of your lifetime',
__v: 0
},
{
_id: 5a0761055876ab10dc00a71f,
title: 'NewEvent',
start: 2017-11-06T08:00:00.000Z,
end: 2017-11-06T15:00:00.000Z,
address: 'digital hub',
description: 'All are invited',
__v: 0
},

How to make full calendar month and year in dropdown selectable

I have a full calendar and I need to show its month and year in dropdown list, I know this question is already asked but still not answered there. I am new to full calendar and as per as i know it is updated now hope there is some easiest way to achieve rather than giving it gotodate option. I have created code pen for the calendar if anyone has done this before then please update my codepen and give me link thank you so much...
demoToEdit
Below is my code I have added some of the functions of full calendar as you see I am not able to get on which event I should right dropdown year and month so I have not done it.
$(window).load(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventRender: function(event, element, view) {
for (var i = 0; i<= event.products.length - 1; i++) {
element.append('<span>'+event.products[i].name+'<span>');
};
},
events: [
{
title: 'EventName',
start: '2016-05-02',
products:[
{
name:'ProductName'
}
]
},
{
title: 'Event',
start: '2016-05-03',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
},
{
name:'ProductName3'
},
]
},
{
title: 'EventName',
start: '2016-05-13',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
}
]
},
{
title: 'Event',
start: '2016-05-15',
products:[
{
name:'ProductName'
}
]
},
{
title: 'EventNAme',
start: '2016-05-21',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
}
]
},
{
title: 'Event',
start: '2016-05-23',
products:[
{
name:'ProductName1'
},
{
name:'ProductName2'
}
]
},
{
title: 'Eventname',
start: '2016-05-25',
products:[
{
name:'ProductName'
}
]
},
{
title: 'Event',
start: '2016-05-29',
products:[
{
name:'ProductName'
}
]
}
],
dayClick: function(date, allDay, jsEvent, view) {
console.log('date'+date.format('DD/MMM/YYYY')+"allDay"+allDay.title+"jsEvent"+jsEvent+"view"+view)
}
});
})
[1]: http://codepen.io/sud/pen/LNvZmv

It is hard to insert drop downs using fullcalendar custom buttons. I simply make header option to false and created custom header myself. Then you can insert any thing to header part and bind events to those buttons and call appropriate fullcalendar function. example functions that available are
prev (),
next (),
prevYear (),
nextYear (),
today (),
gotoDate ()

Extjs listener out of the config

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