i using resourceTimelinePlugin, and always it displayed 7 days in the header, i need change that, how can i do that?
my calendar
my calendarOptions json:
calendarOptions: CalendarOptions = {
plugins: [resourceTimelinePlugin, interactionPlugin, momentPlugin],
schedulerLicenseKey: ConstanteCalendario.schedulerLicenseKey,
headerToolbar: {
left: "today prev,next",
center: "title",
right: "",
},
initialView: OpcionVistaCalendarioEnum.LineaTiempoRecursoSemana,
slotLabelFormat: [
{ weekday: "short", day: "2-digit" }, // lower level of text
],
firstDay: moment().day(),
resourceAreaColumns: [
{
field: "nombreJuez",
headerContent: "Jueces",
},
],
editable: true,
selectable: true,
unselectAuto: true,
slotDuration: { days: 1 },
droppable: true,
locale: "es",
views: {
resourceTimelinePlugin: {
type: 'timelineWeek',
},
week: {
titleFormat: { year: "numeric", month: "long", day: "2-digit" },
titleRangeSeparator: " hasta ",
},
},
timeZone: ConstanteCalendario.timeZone,
displayEventTime: false,
You can modify the duration of a custom view using 'duration', see https://fullcalendar.io/docs/duration.
For instance, if you want to set up a separate view which allows you to view more days you can do that using https://fullcalendar.io/docs/v3/timeline-view.
e.g.
type: 'resourceTimeline',
duration: { days: 3 },
buttonText: '3 days'
Related
I am trying to update Fullcalender view, when the calender resizes.
I am using windowResize event.
This is how it looks now.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('kt_calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
defaultView: 'timeGridWeek',
views: {
timeGridWeek: {
buttonText: 'week',
dayCount: 4,
duration: { days: 4 },
},
test: {
buttonText: 'week',
dayCount: 1,
duration: { days: 1 },
},
abc: {
buttonText: 'week',
dayCount: 2,
duration: { days: 2 },
}
},
windowResize: function(view) {
this.changeView("test");
}
});
calendar.render();
});
windowResize does trigger as it should, but i get this error:
The FullCalendar view "test" does not exist. Make sure your plugins
are loaded correctly
Am I not defining the custom views correct or what am i missing?
After a bit of testing it appears that if you correctly define your custom view with the type property, as documented at https://fullcalendar.io/docs/v4/custom-view-with-settings, then it doesn't throw the error.
views: {
timeGridWeek: {
buttonText: 'week',
dayCount: 4,
duration: { days: 4 },
},
test: {
type: 'timeGrid',
buttonText: 'week',
dayCount: 1,
duration: { days: 1 },
},
abc: {
type: 'timeGrid',
buttonText: 'week',
dayCount: 2,
duration: { days: 2 },
}
(N.B. It shouldn't be needed for the timeGridWeek one since you've simply overwritten the name of a view which is already available in the timeGrid plugin).
Demo: https://codepen.io/ADyson82/pen/ZEWKXRL
i try to display events with timeline plugin. I only see the start date. first image
plugins: [ 'timeline' ],
views: {
timelineThreeYear: {
type: 'timeline',
duration: { year: 3 },
buttonText: '3 ans'
}
},
timeZone: 'local',
height: 400,
defaultView: 'timelineThreeYear',
aspectRatio: 0.5,
header: {
left: 'prev,next',
center: 'title',
right: 'timelineMonth,timelineYear,timelineThreeYear',
},
timeline view
with the same events, with daygrid plugin, i see the events.second image
i don't understand the problem.
plugins: [ 'dayGrid' ],
timeZone: 'UTC',
defaultView: 'dayGridMonth',
editable: true,
daygridMonth view
I use FullCalendar to generate my agenda with 3 sections each day. I add attribute groupByDateAndResource and resources like there:
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'agendaWeek,agendaDayTrucks'
},
views: {
agendaDayTrucks: {
type: 'agenda',
duration: { day: 1 },
buttonText: 'Truck View Per Day'
}
},
buttonText: {
week: 'Week View'
},
nowIndicator: true,
defaultView: 'agendaWeek',
defaultDate: moment().format('YYYY-MM-DD'),
slotDuration: '01:00:00',
snapDuration: '00:05:00',
groupByDateAndResource: true,
resources: [
{ id: 'truck1', title: 'Truck 1' },
{ id: 'truck2', title: 'Truck 2' },
{ id: 'truck3', title: 'Truck 3' }
]
...
});
My calendar show perfectly, but my columns doesn't divided in 3 sections. See image
How can I make divide all my days in sections with FullCalendar.js?
Thanks!
SOLUTION:
I installed extension scheduler.js. This extension of FullCalender display all my resources exactly like I want.
You need to do like this, This is in header, and in body you will have to divide cells again.
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'agendaWeek,agendaDayTrucks'
},
groupByDateAndResource: true,
views: {
agendaDayTrucks: {
type: 'agenda',
duration: { day: 1 },
buttonText: 'Truck View Per Day'
}
},
buttonText: {
week: 'Week View'
},
nowIndicator: true,
defaultView: 'agendaWeek',
defaultDate: moment().format('YYYY-MM-DD'),
slotDuration: '01:00:00',
snapDuration: '00:05:00',
groupByDateAndResource: true,
resources: [
{ id: 'truck1', title: 'Truck 1' },
{ id: 'truck2', title: 'Truck 2' },
{ id: 'truck3', title: 'Truck 3' }
]
...
});
you have to put groupByDateAndResource: true
https://fullcalendar.io/docs/v3/groupByDateAndResource
When we have a column with type date with date format is DD/MM/YYYY in Handsontable and we sort on this column the result is not correct.
Please find the fiddle below.
http://jsfiddle.net/3nwhsm7v/
var hot = new Handsontable(container, {
data: financeData,
colHeaders: ["Price", "Date", "1D Chg", "YTD Chg", "Vol BTC"],
rowHeaders: true,
stretchH: 'all',
sortIndicator: true,
columnSorting: true,
contextMenu: true,
manualColumnMove : true,
columns: [
{type: 'numeric', format: '$0,0.00'},
{type: 'date', dateFormat: 'DD/MM/YYYY', correctFormat: true},
{type: 'numeric', format: '0.00%'},
{type: 'numeric', format: '0.00%'},
{type: 'numeric', format: '0.00'}
]
});
Thanks
I want to make a pdf report against the parameter of my grid value. I want to get the year from the accordion title as parameter number 1 and month name as parameter number 2. But I am not being able to do it. Can anyone please help me on this. Here is my code below :
Ext.define('Ext4Example.view.attendence.Timeperiod' ,{
extend: 'Ext.form.Panel',
alias : 'widget.timeperiod',
id: 'timeperiod',
region: 'west',
border: true,
width: 150,
height:395,
split: true,
defaults: {
// applied to each contained panel
//bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true,
activeOnTop: true,
hideCollapseTool : true
},
initComponent: function() {
var me = this;
me.items = me.maccord();
me.callParent(arguments);
},
mstore: function(year){
var data = [
[1, year, 'January' ],
[2, year, 'February' ],
[3, year, 'March' ],
[4, year, 'April' ],
[5, year, 'May' ],
[6, year, 'June' ],
[7, year, 'July' ],
[8, year, 'August' ],
[9, year, 'September'],
[10, year, 'October' ],
[11, year, 'November' ],
[12, year, 'December' ]
];
var store = Ext.create('Ext.data.ArrayStore', {
storeId: 'mstore',
fields: [
{name: 'id', type: 'int'},
{name: 'year', type: 'int'},
{name: 'month', type: 'string'}
],
data:data
});
return store;
},
mpanel: function(year){
var me = this,
mpanel = new Ext.grid.Panel({
border: false,
viewConfig: {
stripeRows: true
},
hideHeaders: true,
columns: [
{ text: 'month', dataIndex: 'month', flex: 1},
{ menuDisabled : true,
sortable : false,
xtype : 'actioncolumn',
width : 24,
items : [{
icon : "${resource(dir: 'images', file: 'PDF01001.png')}",
hide : true,
tooltip : 'Print PDF Report of this Month?',
handler : function(record) {
alert(record.data.month)
}
}]
}
],
listeners:{
selectionchange:function(model, records ) {
var store = Ext.data.StoreManager.lookup('Attendences');
var record = records[0];
store.load({
filters: [
{property:'month', value:record.data.id},
{property:'year', value:record.data.year}
]
});
}
},
store: me.mstore(year),
width: 150
});
return mpanel;
},
maccord: function(){
var year = ${(new Date()).format('yyyy')},
limit = year - 5,
me = this,
maccord = [];
for(year; year > limit ; year--){
maccord.push({
title: 'Year '+ year,
ident: 'accordion-panel',
items: me.mpanel(year)
});
}
return maccord;
}
});
The month and the year are in your record. You don't need to get the year from the accordion title. Your problem is, that the record is not the first param in the handler:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Action-cfg-handler
items: [{
icon: 'test',
tooltip: 'Print PDF Report of this Month?',
scope: this,
handler: function(view, rowIndex, colIndex, item, e, record) {
alert(record.data.month + "/" + record.data.year);
}
}]
You can look at: http://jsfiddle.net/AMx6r/1279/