I know how to initilize the view of FullCalendar, in particular when my page is load I do:
$('#calendar').fullCalendar({
'defaultView': 'multiColAgendaWeek',
'height': BackendCalendar.getCalendarHeight(),
'editable': true,
'firstDay': 1, // Monday
'slotMinutes': 30,
'snapMinutes': 15,
'axisFormat': 'HH:mm',
'timeFormat': 'HH:mm{ - HH:mm}',
'allDayText': EALang['all_day'],
'columnFormat':
{
'month': 'ddd',
'week': 'ddd D',
'day': 'dddd'
},
'titleFormat':
{
'month': 'MMMM YYYY',
'week': "MMM D YYYY",
'day': 'MMMM D YYYY'
},
'header':
{
'left': 'prev,next today',
'center': 'title',
'right': 'multiColAgendaDay,multiColAgendaWeek,month'
},
'views':
{
'multiColAgendaDay':
{
'type': 'multiColAgenda',
'duration': { days: 1},
'columns':
[
{ id:1, name: 'Op1' },
{ id:2, name: 'Op2' }
]
},
'multiColAgendaWeek':
{
'type': 'multiColAgenda',
'duration': { weeks: 1 },
'columns': [
{ id: 1, name: 'Op1' },
{ id: 2, name: 'Op2' }
]
}
},
I'm using this extension: https://github.com/mherrmann/fullcalendar-columns/issues/1 that add the resource support. Anyway, What I'm trying to do is change the columns parameter content through code. The columns property is inside the two available view multiColAgendaDay and multiColAgendaWeek. I've a method that's populate the calendar with all the appointments available, this method doesn't reload the page 'cause use an ajax request. All working fine, but I want to add in this method a redraw of the columns available, in particular inside the population method at the top of all redrawing the calendar view:
$('#calendar').fullCalendar({
views:
{
'multiColAgendaDay':
{
'type': 'multiColAgenda',
'duration': { days: 1 },
'columns':
[
{ id: 1, name: 'First Column' },
{ id: 2, name: 'Second Column' }
]
}
},
'multiColAgendaWeek':
{
'type': 'multiColAgenda',
'duration': { weeks: 1 },
'columns':
[
{ id: 1, name: 'First Column' },
{ id: 2, name: 'Second Column' }
]
}
});
The problem's that the calendar isn't redrawed and after this code execution the result is ever like this:
I don't know what I'm doing wrong, maybe the calendar can't redraw the view without a page reload? How I can fix this?
In some case render will not works. I have problem such like that so i made a separate method for this. In my case i have passed Json Array on each refresh so, i have first call the method to get array and then add this line:
$("#calendar").fullCalendar('destroy');
and then create calendar instance and passed Json array to events.
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 am using full-calendar from fullcalendar.io and having some trouble customizing its time slot.
I want to add time slots like breakfast, lunch, dinner etc also user can add his/her own slots. How do I set the fixed height according to the number of slots? Also, I want to set the slot column text for breakfast, lunch etc. not 12 am, 6 am. Here's what I did until now:
var today = moment();
$('#calendar').fullCalendar({
droppable: true,
defaultView: 'Week',
header: false,
defaultDate: today,
navLinks: false, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
/*events: [
{
title : 'event1',
start : today,
imageurl:'assets/images/recipe/salad.jpg'
}
],*/
/*views: {
agendaWeek: {
agendaEventMinHeight: 150,
allDaySlot: false,
slotLabelInterval: { hours: 6},
slotDuration: { hours: 1},
duration: { days: 7}
}
},*/
eventRender: function (event, element) {
element.find(".fc-event-title").remove();
element.find(".fc-event-time").remove();
var new_description = '#';
element.append(new_description);
},
now: today,
/*header: {
left: 'promptResource',
center: '',
right: ''
},*/
footer: {
left: 'promptResource',
center: '',
right: ''
},
customButtons: {
promptResource: {
text: '+ add course',
click: function() {
var title = prompt('Course name');
if (title) {
$('#calendar').fullCalendar(
'addResource',
{ title: title },
true // scroll to the new resource?
);
}
}
}
},
views: {
Week: {
type: 'timeline',
duration: { Days: '7' },
slotLabelInterval: { hours: 24},
slotDuration: { hours: 24},
}
},
resourceLabelText: 'Meal',
resourceRender: function(resource, cellEls) {
cellEls.on('click', function() {
if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
$('#calendar').fullCalendar('removeResource', resource);
}
});
},
resources: [
{ id: 'a', title: 'Breakfast' , eventColor: 'red'},
{ id: 'b', title: 'Lunch', eventColor: 'green' },
{ id: 'c', title: 'Dinner', eventColor: 'orange' },
{ id: 'd', title: 'Other', eventColor: 'grey'},
],
events: [
{ id: '1', resourceId: 'b', start: today, end: today, title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" data-print="true" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.css" />
<div id="calendar"></div>
Any help would be really appreciated.
Edit:
Here's what I actually want to implement.
In design, you can see that the time of the day is not important. I want the users to add as many meals a day as they can. I just a want the option to add the meal's title(event). And remove the time slots on the left side.
update:
I've managed to solve this problem to some extent. Here's how it looks now:
But still, there are some problems like how can I change the date format in columnHeader and how can I give fix size to row and columns?
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
I'm trying to filter a dropdown options using the rowEntity value.
$scope.data = [{
'id_a': 1,
'code': 1,
'line': 'Line 1 '
}, {
'id_a': 2,
'code': 2,
'line': 'Line 2'
}, {
'id_a': 3,
'code': 1,
'line': 'Line 3'
}, {
'id_a': 4,
'code': 3,
'line': 'Line 4'
}];
$scope.opts = [{
id: 1,
value: 'A',
code: 1
}, {
id: 2,
value: 'B',
code: 2
}, {
id: 3,
value: 'C',
code: 1
}, {
id: 4,
value: 'D',
code: 1
}, {
id: 5,
value: 'E',
code: 3
}, {
id: 6,
value: 'F',
code: 2
}];
$scope.columns = [{
field: 'line',
enableCellEdit: false,
enableFiltering: false
}, {
field: 'code',
enableCellEdit: false,
enableFiltering: false
}, {
field: 'value',
enableFiltering: false,
width: 500,
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownIdLabel: 'id',
editDropdownValueLabel: 'value',
editDropdownOptionsArray: $scope.opts
}];
$scope.gridOptions = {
enableCellEditOnFocus: true,
enableFiltering: true,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
},
columnDefs: $scope.columns
};
$scope.gridOptions.data = $scope.data;
What i'm trying to do is load an array in editDropdownOptionsArray and then dynamically filter this array using a value.
If i'm in 'Line 1' then can only appear the options that have the same 'code' value.
In this case 'Line 1' have the code '1' then the dropdowns options are 'A','C','D'
How can i do this? Using cellFilter?
Here is a plunker with the base code.
Hope this works out for you, and feel free to accept it it does:
Working Plnkr
Set your template:
editableCellTemplate: 'dropdown.html'
Add dropdown.html to your project:
<select ng-model="MODEL_COL_FIELD" ng-options="item as item.value for
item in col.colDef.editDropdownOptionsArray | filter : { code:
row.entity.code}"></select>
Test:
After the solution from KreepN i've made some upgrades in the code because i wasn't getting the value of the row when i choose one option.
I add ui-grid-edit-dropdown on select and that's solved the problem.
Updated Plnkr
Once again thank you KreepN for your solution.
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/