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 ()
Related
I have this script that get JSON value from server and then post them on Fullcalendar, the extraction and post value works perfectly but the problem that sometimes I got more than one value on JSON result.
my code is below
.done(function (data) {
var html = ""
console.log(data);
console.log(data[0].events)
let calendar = new FullCalendar.Calendar(calendarEl, {
// On charge le composant "dayGrid"
plugins: ['dayGrid', 'timeGrid', 'list'],
//defaultView: 'listMonth',
//local :'fr', //traduction,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,list'
},
buttonText: {
today: 'aujourd\'hui',
month: 'Mois',
week: 'Semaine',
list: 'liste'
},
events: [
{
title: data[0].events.title,
start: data[0].events.start,
end: "2020-05-18 18:00:00"
},
],
nowIndicator: true
});
the data containe JSON result which is like below :
what I want is this :
if the data[i] > 1 how can I modify my code in order to display all the potential value and if there is another data at the same time and date then it is displayed also next to the first one
the part that needs to be modified is below
events: [
{
title: data[0].events.title,// 0 is first index, how to place i incrementation
start: data[0].events.start,
end: "2020-05-18 18:00:00"
},
],
Any idea please ?
Best Regards
Since data is an array, you can iterate over it like so:
.done(function (data) {
var html = ""
console.log(data);
console.log(data[0].events)
const events = data.map((row)=>{
return {
title: row.events.title,
start: row.events.start,
end: "2020-05-18 18:00:00"
}
})
let calendar = new FullCalendar.Calendar(calendarEl, {
// On charge le composant "dayGrid"
plugins: ['dayGrid', 'timeGrid', 'list'],
//defaultView: 'listMonth',
//local :'fr', //traduction,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,list'
},
buttonText: {
today: 'aujourd\'hui',
month: 'Mois',
week: 'Semaine',
list: 'liste'
},
events,
nowIndicator: true
});
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
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
},
so I am trying to modify the example Cumulative flow chart here so that it has a release dropdown, making it so that it only shows information pertaining to a given release. My problem is that when a new release is selected from the release dropdown, the graph does not reload itself, and so it never actually shows information pertinent to the selected release. I think I have implemented the listeners correctly but I am not sure, so I am wondering if someone could tell me why this is happening and how to fix it. Thanks! My code is below:
<!DOCTYPE html>
<html>
<head>
<title>Historical Summary</title>
<script type="text/javascript" src="/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('Rally.example.CFDCalculator', {
extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
config: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},
getMetrics: function() {
return _.map(this.getStateFieldValues(), function(stateFieldValue) {
return {
as: stateFieldValue,
groupByField: this.getStateFieldName(),
allowedValues: [stateFieldValue],
f: 'groupByCount',
display: 'area'
};
}, this);
}
});
Ext.define('Rally.example.CFDChart', {
extend: 'Rally.app.App',
requires: [
'Rally.example.CFDCalculator'
],
launch: function() {
this.add({
xtype: 'rallyreleasecombobox',
fieldLabel: 'Filter by Release:',
project: this.getContext().getProject(),
//value: Rally.util.Ref.getRelativeUri(this.getContext().getRelease()),
listeners: {
select: this._onSelect,
ready: this._onLoad,
scope: this
}
});
},
_onLoad: function() {
this.add({
xtype: 'rallychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreConfig(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
chartConfig: this._getChartConfig()
//context: this.getContext();
});
},
_onSelect: function() {
var histChart = this.down('rallychart');
histChart.refresh({
storeConfig: {
filters: [this._getOwnerFilter()]
}
});
},
_getOwnerFilter: function() {
//var userCombo = this.down('rallyusersearchcombobox');
var releaseValue = this.down('rallyreleasecombobox');
return {
property: 'Release',
operator: '=',
value: releaseValue.getValue()
};
},
/**
* Generate the store config to retrieve all snapshots for stories and defects in the current project scope
* within the last 30 days
*/
_getStoreConfig: function() {
return {
find: {
_TypeHierarchy: { '$in' : [ 'HierarchicalRequirement', 'TestSet' ] },
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID,
_ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -30)) }
},
fetch: ['ScheduleState'],
hydrate: ['ScheduleState'],
sort: {
_ValidFrom: 1
},
context: this.getContext().getDataContext(),
limit: Infinity
};
},
/**
* Generate a valid Highcharts configuration object to specify the chart
*/
_getChartConfig: function() {
return {
chart: {
zoomType: 'xy'
},
title: {
text: 'Project Cumulative Flow: User Stories & Test Sets'
},
xAxis: {
tickmarkPlacement: 'on',
tickInterval: 1,
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
stacking: 'normal'
}
}
};
}
});
Rally.launchApp('Rally.example.CFDChart', {
name: 'Historical summary: test cases, stories, and defects'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Your code errors with "Uncaught TypeError: undefined is not a function" on line
histChart.refresh
I modified example of ProjectCumulativeFlow to filter by Release. Full code is in this github repo.
Instead of extending Rally.app.App, I extended Rally.app.TimeboxScopedApp.
SnapshotStore may filter by Release, but requires ObjectID.
Here is the find:
find: {
_TypeHierarchy: { '$in' : [ 'HierarchicalRequirement', 'Defect' ] },
Release: this.getContext().getTimeboxScope().record.data.ObjectID,
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID
}
To update the app after Release selection check if the chart already exists (if yes, destroy it):
onScopeChange: function() {
if (this.down('#mychart')) {
this.down('#mychart').destroy();
}
this.add({
xtype: 'rallychart',
itemId: 'mychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreConfig(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
chartConfig: this._getChartConfig()
});
},
I'm using GeoExt2 (alpha) + Extjs 4.1 now to implement a map application. The thing is sometimes when I select a feature on the map, two popups are displayed. one at the bottom of the screen which has correct info and one empty in the right place. it doesn't go even I close it. I wonder if this is a bug ?
myLayer.events.on({
featureselected: function(e) {
createPopup(e.feature);
},
featureunselected: function(){
popup.destroy();
}
});
function createPopup(feature) {
popup = Ext.create('GeoExt.Popup', {
id: 'popup',
title: title,
location: feature,
});
popup.on({
close: function() {
if(OpenLayers.Util.indexOf(myLayer.selectedFeatures,
this.feature) > -1) {
selectControl.unselect(this.feature);
}
}
});
PopupTab = Ext.create('Ext.tab.Panel', {
id: 'PopupTabs',
activeTab:2,
items: [
{
title: 'Supervisor',
itemId: 'tab1',
},
{
title: 'student',
itemId: 'tab2',
items: [
{
xtype: 'label',
id: 't',
html: content,
layout: 'fit',
cls:'tabStyle'
}
]
},
],
listeners: {
tabchange: function(panel, tab) {
if (tab.popup !== undefined) { // show window after tab change
tab.popup.show();
}
}
}
});
popup.add(PopupTabs);
popup.show();
}