SchdulerConfig.js
import {AjaxHelper} from 'bryntum-scheduler';
const resources = [
{ id : 'r1', name : 'Mike'},
{ id : 'r2', name : 'Linda' },
{ id : 'r3', name : 'Don'},
{ id : 'r4', name : 'Karen'},
{ id : 'r5', name : 'Doug'},
{ id : 'r6', name : 'Peter'},
{ id : 'r7', name : 'Sam'},
{ id : 'r8', name : 'Melissa'},
{ id : 'r9', name : 'John'},
{ id : 'r10', name : 'Ellen'}
],
events = [
{
resourceId : 'r1',
startDate : new Date(2020, 5, 29, 10),
endDate : new Date(2020, 5, 29, 12),
name : 'Click me',
iconCls : 'b-fa b-fa-mouse-pointer',
eventType: 'meeting',
canceled: true
},
{
resourceId : 'r1',
startDate : new Date(2020, 5, 29, 10),
endDate : new Date(2020, 5, 29, 12),
name : 'Click Session',
iconCls : 'b-fa b-fa-mouse-pointer',
eventType: 'meeting session',
canceled: true
},
{
resourceId : 'r2',
startDate : new Date(2020, 5, 29, 12),
endDate : new Date(2020, 5, 29, 13, 30),
name : 'Drag me',
iconCls : 'b-fa b-fa-arrows-alt',
eventType: 'meeting'
},
{
resourceId : 'r3',
startDate : new Date(2020, 5, 29, 14),
endDate : new Date(2020, 5, 29, 16),
name : 'Double click me',
eventColor : 'purple',
iconCls : 'b-fa b-fa-mouse-pointer',
eventType: 'activity',
done: true
},
{
resourceId : 'r4',
startDate : new Date(2020, 5, 29, 8),
endDate : new Date(2020, 5, 29, 11),
name : 'Right click me',
iconCls : 'b-fa b-fa-mouse-pointer',
eventType: 'activity'
},
{
resourceId : 'r5',
startDate : new Date(2020, 5, 29, 15),
endDate : new Date(2020, 5, 29, 17),
name : 'Resize me',
iconCls : 'b-fa b-fa-arrows-alt-h'
},
{
resourceId : 'r6',
startDate : new Date(2020, 5, 29, 16),
endDate : new Date(2020, 5, 29, 19),
name : 'Important meeting',
iconCls : 'b-fa b-fa-exclamation-triangle',
eventColor : 'red'
},
{
resourceId : 'r7',
startDate : new Date(2020, 5, 29, 6),
endDate : new Date(2020, 5, 29, 8),
name : 'Sports event',
iconCls : 'b-fa b-fa-basketball-ball'
},
{
resourceId : 'r8',
startDate : new Date(2020, 5, 29, 9),
endDate : new Date(2020, 5, 29, 11, 30),
name : 'Dad\'s birthday!',
iconCls : 'b-fa b-fa-birthday-cake',
style : 'background-color : teal; font-size: 18px'
},
{
resourceId : 'r1',
startDate : new Date(2020, 5, 30, 10),
endDate : new Date(2020, 5, 30, 12),
name : 'Click me',
iconCls : 'b-fa b-fa-mouse-pointer',
eventType: 'meeting',
canceled: true
},
{
resourceId : 'r2',
startDate : new Date(2020, 5, 30, 12),
endDate : new Date(2020, 5, 30, 13, 30),
name : 'Drag me',
iconCls : 'b-fa b-fa-arrows-alt',
eventType: 'meeting'
},
{
resourceId : 'r3',
startDate : new Date(2020, 5, 30, 14),
endDate : new Date(2020, 5, 30, 16),
name : 'Double click me',
eventColor : 'purple',
iconCls : 'b-fa b-fa-mouse-pointer',
eventType: 'activity',
done: true
},
{
resourceId : 'r4',
startDate : new Date(2020, 5, 30, 8),
endDate : new Date(2020, 5, 30, 11),
name : 'Right click me',
iconCls : 'b-fa b-fa-mouse-pointer',
eventType: 'activity'
},
{
resourceId : 'r5',
startDate : new Date(2020, 5, 30, 15),
endDate : new Date(2020, 5, 30, 17),
name : 'Resize me',
iconCls : 'b-fa b-fa-arrows-alt-h'
},
{
resourceId : 'r6',
startDate : new Date(2020, 5, 30, 16),
endDate : new Date(2020, 5, 30, 19),
name : 'Important meeting',
iconCls : 'b-fa b-fa-exclamation-triangle',
eventColor : 'red'
},
{
resourceId : 'r7',
startDate : new Date(2020, 5, 30, 6),
endDate : new Date(2020, 5, 30, 8),
name : 'Sports event',
iconCls : 'b-fa b-fa-basketball-ball'
},
{
resourceId : 'r8',
startDate : new Date(2020, 5, 30, 9),
endDate : new Date(2020, 5, 30, 11, 30),
name : 'Dad\'s birthday!',
iconCls : 'b-fa b-fa-birthday-cake',
style : 'background-color : teal; font-size: 18px'
},
];
const timeRanges = [
{
id: 1,
startDate: new Date(2020,5,29, 8),
endDate: new Date(2020,5,29, 9),
name: "Morning coffee",
cls: 'coffee'
},
{
id: 1,
startDate: new Date(2020,5, 29, 18),
endDate: new Date(2020,5, 29, 19),
name: "Morning coffee",
cls: 'coffee'
}
]
export default {
nonWorkingTimeFeature : true,
eventStore : {
// Additional fields added to EventModel
fields : ['done', 'canceled', 'locked']
},
features : {
eventTooltip : {
template : () => AjaxHelper.get(`https://jsonplaceholder.typicode.com/todos/1`).then(response => response.text())
},
strike:true,
timeRanges: {
enableResizing : false,
showCurrentTimeLine : true,
showHeaderElements : true
},
eventContextMenu : {
items : {
moveLeft : {
text : 'Move left',
icon : 'b-fa b-fa-fw b-fa-arrow-left',
cls : 'b-separator',
onItem({ eventRecord }) {
console.log(eventRecord.startDate);
//eventRecord.startDate = DateHelper.add(eventRecord.startDate, -1, 'hour');
}
},
moveRight : {
text : 'Move right',
icon : 'b-fa b-fa-fw b-fa-arrow-right',
onItem({ eventRecord }) {
console.log(eventRecord.startDate);
//eventRecord.startDate = DateHelper.add(eventRecord.startDate,25, 'hour');
}
},
split : {
text : 'Split',
icon : 'b-fa b-fa-fw b-fa-cut',
onItem({ eventRecord }) {
eventRecord.split();
}
},
lock : {
text : 'Lock',
icon : 'b-fa b-fa-fw b-fa-lock',
cls : 'b-separator',
onItem({ eventRecord }) {
eventRecord.locked = true;
eventRecord.draggable = false;
eventRecord.resizable = false;
}
}
},
// Process items before context menu is shown, add or remove or prevent it
processItems({ eventRecord, items }) {
if (eventRecord.eventType === 'meeting') {
console.log('coming inside the eventType meeting');
// Add a custom item for meetings
items.cancel = {
text : 'Cancel',
icon : 'b-fa b-fa-fw b-fa-ban',
cls : 'b-separator',
onItem({ eventRecord }) {
eventRecord.canceled = true;
}
};
}
if (eventRecord.eventType === 'activity') {
console.log('coming inside the eventType meeting');
// Remove "Edit" and "Delete" items for activities
items.editEvent = items.deleteEvent = false;
// Add a "Done" item
items.done = {
text : 'Done',
icon : 'b-fa b-fa-fw b-fa-check',
cls : 'b-separator',
weight : 500,
onItem({ eventRecord }) {
eventRecord.done = true;
}
};
}
// Not possible to lock canceled or completed events, disable the item
if (eventRecord.canceled || eventRecord.done) {
items.lock.disabled = true;
}
// Prevent menu for "locked" event
return !eventRecord.locked;
}
},
},
minHeight: '20em',
resources: resources,
events: events,
timeRanges: timeRanges,
startDate: new Date(2020,5,29, 8),
endDate: new Date(2020,5, 29, 19),
viewPreset: 'hourAndDay',
rowHeight: 50,
barMargin: 5,
multiEventSelect: true,
eventLayout : 'pack',
workingTime : {fromHour : 8,toHour : 19},
forceFit : true,
columns : [
{
text : 'NAME',
field : 'name',
width : 100,
region : 'left',
htmlEncode : false,
renderer : ({ record }) => `${record.name} <div id="location_${record.id}" style="margin-left: 10px;" class="location b-fa b-fa-user"></div>`,
}
],
};
Header.vue
<template>
<div id ="tools"></div>
</template>
<script>
// we import scheduler.umd for IE11 compatibility only. If you don't use IE import:
import { DateHelper, WidgetHelper,Scheduler } from 'bryntum-scheduler';
//import scheduler from 'bryntum-vue-shared/src/Scheduler.vue';
// import { Fullscreen, WidgetHelper } from 'bryntum-scheduler/scheduler.umd';
// export the button
export default {
name : 'datehelper-button',
props : {
scheduleObj : String
}, data() {
return {
}
},// eo function data
mounted() {
var self = this;
WidgetHelper.append([{
type : 'button',
icon : 'b-icon b-fa b-fa-angle-right',
color : 'b-blue b-raised',
tooltip : 'View next day',
onAction() {
}
},
{
type : 'button',
ref : 'weekButton',
color : 'b-blue b-raised',
width : 60,
text : 'Week',
onAction() {
self.$emit('duration', 'week');
/* const week = DateHelper.clearTime(new Date());
week.setHours(5);
Scheduler.setTimeSpan(week, DateHelper.add(week, 18, 'hour'));*/
}
},
{
type : 'button',
ref : 'twoButton',
color : 'b-blue b-raised',
width : 75,
text : 'Tow-day',
onAction() {
self.$emit('duration', 'Tow-day');
/* const towday = DateHelper.clearTime(new Date());
today.setHours(5);
Scheduler.setTimeSpan(towday, DateHelper.add(twoday, 18, 'hour'));*/
}
},
{
type : 'button',
ref : 'todayButton',
color : 'b-blue b-raised',
width : 65,
text : 'Today',
onAction() {
self.$emit('duration', 'day');
// const today = DateHelper.clearTime(new Date()); today.setHours(8); scheduler.setTimeSpan(today, DateHelper.add(today, 15, 'hour'));
}
},
{
type : 'button',
icon : 'b-icon b-fa b-fa-angle-left',
color : 'b-blue b-raised',
tooltip : 'View previous day',
onAction() {
Scheduler.shiftPrevious();
}
},
{
type : 'datefield',
ref : 'datefield',
label : 'Select date',
width : 250,
height : 38,
value : new Date(),
editable : true,
cls : 'b-bright',
listeners : {
change({ dateField, value,userAction }) {
value => new Date('') ;
self.$emit('duration', value);
}
//change : ({ value }) => Scheduler.setTimeSpan(DateHelper.add(value, 8, 'hour'), DateHelper.add(value, 19, 'hour'))
}
},
{
type : 'button',
ref : 'noneButton',
color : 'b-blue b-raised',
minWidth : 80,
text : 'Overlap',
toggleGroup : 'layoutType',
onAction () {
self.$emit('duration', 'overlap');
}
},
{
type : 'button',
ref : 'stackButton',
color : 'b-blue b-raised',
minWidth : 80,
text : 'Stack',
toggleGroup : 'layoutType',
onAction () {
self.$emit('duration', 'stack');
}
},
{
type : 'button',
ref : 'packButton',
color : 'b-blue b-raised',
minWidth : 80,
text : 'Pack',
pressed : true,
toggleGroup : 'layoutType',
onAction () {
self.$emit('duration', 'Pack');
}
},
{
type : 'textfield',
ref : 'filterByName',
icon : 'b-fa b-fa-filter',
cls : 'b-bright',
placeholder : 'Find tasks by name',
clearable : true,
keyStrokeChangeDelay : 100,
triggers : {
filter : {
align : 'start',
cls : 'b-fa b-fa-filter'
}
},
listeners : {
onChange({ value,filterByName }) {
alert(" value " + value + " " +scheduler );
value = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// Replace previous filtering fn with a new filter
scheduler.eventStore.filter({
filters : event => event.name.match(new RegExp(value, 'i')),
replace : true
});
}
}
}],
{ insertFirst : document.getElementById('tools') || document.body });
},
}
</script>