resizing an event in fullcalendar - angularjs

I'm working with a fullCalendar and I want to get the "end" property value for an event after resizing it like this:
for this first event "gaming day"
I get start = Mon Aug 01 2016 01:00:00 GMT+0100 (WEST) and
end = Wed Aug 02 2016 01:00:00 GMT+0100 (WEST)
how can I get the the value of end after resizing my event manually
this is my code :
$scope.listEvents = [{
title: 'Gaming Day',
start: '2016-08-13T12:00:00',
end: '2016-08-15T00:00:00',
color: #9b59b6,
allDay: true
}, {
title: 'Live Conference',
start: new Date(y, m, 3)
}, {
title: 'Top Secret Project',
start: new Date(y, m, 4),
end: new Date(y, m, 8),
color: '#1abc9c'
}];
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
firstDay: 1,
editable: true,
droppable: true,
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// remove the element from the "Draggable Events" list
$(this).remove();
},
events: $scope.listEvents,
eventDrop: function(event, delta, revertFunc) {
/* After a drag and drop of my event I get the new position with this */
console.log(event.title);
if (event.start) console.log(event.start._d);
if (event.end) console.log(event.end._d);
}
});
So after resizing the event how can I get the new end date?

Use the eventResize property:
function eventResize(event, delta, revertFunc) {
var endDate = event.end.format().toString();
var startDate = event.start.format().toString();
}
And in the calendar config add the reference to the function:
header: {...},
eventResize: eventResize

Related

React 18 FullCalendar 5 how can I go about finding the next X upcoming events?

Adding React Full Calendar with the RRule Plugin. I have an array of calendar events, how would I go about finding the next X number calendar events? So if today is Friday and my next two events are on Monday and Wednesday next week, I want to be able to display those on a different component. This isn't for displaying the events on the calendar, but rather on the dashboard I want to show the user what their next two events are. I can do the date comparison, I just haven't found in their docs how to get all of the upcoming events and return the objects.
useEffect(() => {
// get all calendar items, find next two events
var today = new Date().getTime();
INITIAL_EVENTS.forEach(i => {
console.log(i.rrule)
});
}, [INITIAL_EVENTS])
const INITIAL_EVENTS = [
{
id: 321,
title: 'Last Friday of every month',
color: 'orange',
rrule: {
freq: 'monthly',
interval: 1,
byweekday: [CALENDAR_ENUM.Friday],
bysetpos: -1,
dtstart: '2022-02-01',
until: '2028-06-01'
}
},
{
id: 321,
title: 'First Friday of every Third month',
color: 'pink',
rrule: {
freq: 'monthly',
interval: 3,
byweekday: [CALENDAR_ENUM.Friday],
bysetpos: 1,
dtstart: '2022-02-01',
until: '2028-06-01'
}
},
]
...
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, rrulePlugin]}
headerToolbar={{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}}
initialView='dayGridMonth'
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
initialEvents={INITIAL_EVENTS}
select={createEventFromSelectedDate}
eventContent={renderEventContent}
eventClick={showHideAddEventHandler}
eventsSet={handleEvents}
/>
Unfortunately it seems that out of the box, FullCalendar and RRulePlugin do not have such a solution, or I have not found it. So basic filtering and mapping is the way to go.
let todayStr = new Date().toISOString().replace(/T.*$/, '')
useEffect(() => {
let calendarApi = calendarRef.current.getApi();
let events = calendarApi.getEvents(); // Get calendar events
let calendarEvents = events.map(i => i.toPlainObject()); // Convert to raw object
let filteredEvents = calendarEvents.filter(i => i.start >= todayStr); // filter against todays date
let sorted = filteredEvents.sort((a, b) => a.start.localeCompare(b.start)); // Sort
console.log(sorted.slice(0, 4)); // return
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [calendarRef]);

Regarding displaying ui-calendar events

Hello all i am designing a leave management website with angularjs and ui-calendar.If a user takes a leave ,the values are taken from the database and displayed as an event in the calendar.Now what i want to do is ,if the user is not absent on particular day,it should be displayed as present event.Hope the following image helps understanding better.
Now vikki is taking leave on friday.I want to mark other dates as an event displaying in different color saying he s present.I need this to be in the week view.Please let me know if there is any way to do this thing.Following is my code
app.factory('calendarSer', ['$http','$rootScope', 'uiCalendarConfig', function ($http,$rootScope, uiCalendarConfig) {
return {
displayCalendar: function($scope) {
$calendar = $('[ui-calendar]');
var date = new Date(),
d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$scope.changeView = function(view) {
$calendar.fullCalendar('changeView', view);
};
/* config object */
$scope.uiConfig = {
calendar: {
lang: 'da',
height: 450,
editable: true,
selectable: true,
header: {
left: 'month basicWeek basicDay',
center: 'title',
right: 'today prev,next'
},
eventClick: function(date, jsEvent, view) {
$scope.alertMessage = (date.title + ' was clicked ');
alert("clicked" + date.title);
},
select: function(start, end, allDay) {
var obj = {};
obj.startAt = start.toDate();
obj.startAt = new Date(obj.startAt).toUTCString();
obj.startAt = obj.startAt.split(' ').slice(0, 4).join(' ');
obj.endAt = end.toDate();
obj.endAt = new Date(obj.endAt).toUTCString();
obj.endAt = obj.endAt.split(' ').slice(0, 4).join(' ');
$rootScope.selectionDate = obj;
$("#modal1").openModal();
calendar.fullCalendar('unselect');
},
eventRender: $scope.eventRender
}
};
$scope.events = [];
$scope.eventSources = [$scope.events];
$http.get("rest/leave/list", {
cache: true,
params: {}
}).then(function(data) {
$scope.events.slice(0, $scope.events.length);
angular.forEach(data.data, function(value) {
console.log(value.title);
$scope.events.push({
title: value.title,
description: value.description,
start: value.startAt,
end: value.endAt,
allDay: value.isFull,
stick: true
});
});
});
}
}
}]);
Thanking you
You need to also create the events array which would display the user is present. However, if you try to create the array in the front-end, then you would not know the other user information to fill the calendar.
"rest/leave/list" : will return that vikki is on leave, however what if the other user that has not taken any leave and is not returned in this array? how will you be able to fill the calendar saying user is present all the other days?
$scope.events.push({
title: value.title,
description: value.description,
start: value.startAt,
end: value.endAt,
allDay: value.isFull,
stick: true
});
$scope.eventSources = [$scope.events];
You are filling the events and binding it to the eventSources.
So you need to return something like below from the reponse "rest/leave/list":
{
title: "vikki",
description: "description",
startAt: "2017-05-05 00:00",
endAt: "2017-05-05 23:59",
isFull: true,
leave: true <- This will say he is absent
},
{
title: "vikki",
description: "description",
//The start and end date time will control the block that will be booked in the calendar
startAt: "2017-06-05 00:00",
endAt: "2017-01-06 23:59",
isFull: true,
leave: false <- This will say he is present
//This array will book the calendar from May-06 to end of the month.
//If you want the past, then create one in the past and send it from
//server
}
In the above array, you need to create separate rows for absent and present. For example , 1st row consist of January month where the user has not taken any leaves, so you create a row with Start date Jan 01 and End date Jan 30, In Feb, the user has taken one leave on say 5th. So you create three rows, row 1 with Feb 01 to Feb 04 as present, row 2 with Feb 05 as absent, and row 3 with Feb 06 - Feb 31 as present
Using the variable "leave" from the array, in the frontend you can change the colour. You can refer it from this how to achieve it.
Jquery Full calendar and dynamic event colors

EXT JS 5 - Custome Filter for hours and minutes

I have value in minutes and i converted into hours and minutes (e.g like 615 minutes=10 hours and 15 minutes) and displayed in grid. by default ext js 5 is providing filter by string. But i want to filter by hours and minutes. Is it possible? if so, let me know.
You can easily extend Ext.grid.filters.filter.String filter to do that.
Example code which uses timefield:
Ext.define('Ext.ux.grid.filters.filter.Time', {
extend: 'Ext.grid.filters.filter.String',
alias: 'grid.filter.time',
type: 'time',
operator: 'eq',
// change item template to timefield
itemDefaults: {
xtype: 'timefield',
enableKeyEvents: true,
format: 'H:i',
hideEmptyLabel: false,
iconCls: Ext.baseCSSPrefix + 'grid-filters-find',
labelSeparator: '',
labelWidth: 29,
margin: 0,
selectOnFocus: true
},
createMenu: function () {
var me = this;
me.callParent();
// add handler to change event
me.inputItem.on({
scope: me,
change: {
fn: me.onChange,
buffer: 200
}
});
},
// handle change event
onChange: function(field) {
this.setValue(field.getValue());
},
// set value - value comes as date
setValue: function (value) {
var me = this;
if (me.inputItem) {
me.inputItem.setValue(value);
}
// convert date to number
me.filter.setValue(value.getHours() * 60 + value.getMinutes());
if (value && me.active) {
me.updateStoreFilter(me.filter);
} else {
me.setActive(!!value);
}
},
activateMenu: function () {
var value = this.filter.getValue();
// convert number back to date
this.inputItem.setValue(
new Date(2008, 0, 1, Math.floor(value / 60), (value % 60), 0)
);
}
});
Fiddle: http://jsfiddle.net/dw82uxkh/9/

How Can I add Dynamic Textboxes in extjs grid

I am having a button on page on the click of the button i need to add rows inside extjs grid.
The row will contain the controls like textbox, combobox, datefields etc.
I have added dynamic rows to the store like this -
var r = Ext.create('Model', {
name: 'XYZ',
email: 'abc#abc.com',
start: new Date(),
salary: 50000,
active: true
});
var i = 0;
page.store.insert(i, r);
But this way i can add records only. and i want to add controls to the grid. Please suggest.
Thanks,
I have used the grid row editing plugin for the issue.
Here i am adding the row to the store and opening it in edit mode via edit plugin.
Sample code is here.
tbar: [
{
text: 'Add Row',
iconCls: 'employee-add',
handler: function () {
//var Date = new Date();
//var Time = new Date().getTime() / 1000;
rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('TagAdjustment', {
startDate: Ext.Date.clearTime(new Date()),
startTime: 10,
stopDate: Ext.Date.clearTime(new Date()),
stopTime: 10,
rampStart: 10,
rampStop: 10,
gen: 10
});
var selectedRecord = grid.getSelectionModel().getSelection()[0];
var row = grid.store.indexOf(selectedRecord);
store.insert(row + 1, r);
rowEditing.startEdit(row + 1, 0);
}
},

How to get form field value in onclick event

I am using this article of architecture http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/
in my code:
I have this Application.DashBoardForm.js in this i want to pass the value of the fromdate in the onclick event function , how can i pass the fromdate value ?
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if(!date){
return false;
}
if (field.startDateField) {
var start = Ext.getCmp(field.startDateField);
if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
start.setMaxValue(date);
start.validate();
}
}
else if (field.endDateField) {
var end = Ext.getCmp(field.endDateField);
if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
end.setMinValue(date);
end.validate();
}
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
}
});
Application.DashBoardForm= Ext.extend(Ext.FormPanel, {
border:false
,initComponent:function() {
var config = {
labelWidth: 125,
frame: true,
title: 'Date Range',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 175},
defaultType: 'datefield',
items: [{
fieldLabel: 'Start Date',
name: 'fromdate',
id: 'fromdate',
vtype: 'daterange',
value : new Date(),
endDateField: 'todate' // id of the end date field
},{
fieldLabel: 'End Date',
name: 'todate',
id: 'todate',
vtype: 'daterange',
value : new Date(),
startDateField: 'fromdate' // id of the start date field
}]
,buttons: [{
text: 'Go',
onClick : function () {
// here i want to access the value of the form field
// how can i access the fromdate value so that i pass it to grid
console.log(this.getForm());
var win = new Ext.Window({
items:{xtype:'DashBoardGrid',fromdate:this}
});
win.show();
}
}]
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.DashBoardForm.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender:function() {
// this.store.load();
Application.DashBoardForm.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('DashBoardForm', Application.DashBoardForm);
How can I pass the value of from date here in onclick function?
Being that you gave the field an ID of 'fromdate', you can reference it using Ext.getCmp() and from there call its getValue() method:
var field = Ext.getCmp('fromdate');
var win = new Ext.Window({
items: {
xtype: 'DashBoardGrid',
fromdate: field.getValue()
}
});
Set the scope of your button 'Go', so that you will have access to form within the handler method. By doing this, you will have access to the form from the handler method.
Now, to get access to the form element, you can use ref property or use find*() methods available in Ext.form.FormPanel to get the form element.
text: 'Go',
scope: this,
handler: function () {
fromdate = this.findById('fromdate');
// extract date value and use it...
value = fromdate.getValue();
}
When using ref property, set a ref for the formdata field:
ref: '../formdate'
fieldLabel: 'Start Date',
name: 'fromdate',
id: 'fromdate',
vtype: 'daterange',
value : new Date(),
endDateField: 'todate' // id of the end date field
And you should be able to access the form element through the form object in the handler.
this.formdate.getValue()

Resources