Liferay's calendar portlet uses AUI scheduler. I got following issue :
I created following two an event on same day which starts on weekend(Sunday) and ends on next day (Monday)(first day of next week)
Event-A :
start-time : 12:10 PM, Sunday
end-time : 11:59 PM, Monday
Event-B :
start-time : 12:00 PM, Sunday
end-time : 11:59 PM, Monday
Ideally both the events should span across Sunday and Monday. But on scheduler (month) view it, Event-A only spans across Monday and Event-B spans on Sunday and Monday both, which is correct rendering.
Anyone have any idea on this ??
I have created a sample fiddle which will be helpful to understand this: http://jsfiddle.net/RU5xw/41/
YUI().use(
'aui-scheduler',
function (Y) {
var events = [{
content: 'Event A',
endDate: new Date(2013, 1, 17, 4),
reminder: false,
startDate: new Date(2013, 1, 16, 13)
}, {
content: 'Event B',
endDate: new Date(2013, 1, 17, 4),
reminder: false,
startDate: new Date(2013, 1, 16, 12)
}];
var agendaView = new Y.SchedulerAgendaView();
var dayView = new Y.SchedulerDayView();
var eventRecorder = new Y.SchedulerEventRecorder();
var monthView = new Y.SchedulerMonthView();
var weekView = new Y.SchedulerWeekView();
new Y.Scheduler({
activeView: monthView,
boundingBox: '#myScheduler',
date: new Date(2013, 1, 4),
eventRecorder: eventRecorder,
items: events,
render: true,
views: [dayView, weekView, monthView, agendaView]
});
});
I found a fix available for this on Liferay marketplace. Calendar Fix Hook
Related
I'm using bootstrap datetime-picker in angularjs
I need to show color on some specific dates i.e. on weekend and holiday dates
Here is my date picker option :-
$scope.dateOptions = {
dateFormat: 'yyyy-MM-dd',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1,
onChangeDate: countDays
};
I'm getting list of holidays from database and weekends I'm able to identify.
How to show color to specific date?
I tried using some custom css but its applying on all the dates not to specific.
Thanks!
Answering your question
How to show color to specific date?
Bootstrap datetime-picker for Angularjs Do provide an option to apply custom class.
Try this
$scope.dateOptions = {
dateFormat: 'yyyy-MM-dd',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1,
onChangeDate: countDays,
customClass: getDayClass // fucntion having logic to select particular dates
};
The function getDayClass can be implement like this
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
// check for weekend 0 for sun and 6 for sat
if(date.getDay() == 0 || date.getDay() == 6)
{
return 'full'; //return class to be applied
}
}
return '';
}
Set the class for dates
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date(tomorrow);
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
The date picker calls date picker options for every date at the time of initialization.
you can check the Plunker example.
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
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
I am using angular bootstrap datepicker in my code. Problem with my requirement is that I want to have certain dates to be selected in the datepicker on which deliveries will be made. I am new to angular JS and have no Idea how to do that. Can someone help me in this ?
PS:I do not require the calendar to take input It is just needed to show the selected dates.
You can use the custom-class attribute to do this.
From the documentation
custom-class (date, mode) (Default: null) : An optional expression to
add classes based on passing date and current mode (day|month|year).
Here is a sample of the relevant handler adapted from the Angular UI Bootstrap example
...
$scope.events =
[
{
date: new Date(2015, 9, 1),
status: 'delivered'
},
{
date: new Date(2015, 9, 5),
status: 'delivered'
},
{
date: new Date(2015, 9, 15),
status: 'delivered'
}
];
$scope.getDayClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i=0;i<$scope.events.length;i++){
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
};
...
Plunker - http://plnkr.co/edit/vJl8hDUfsBOJsLXFNKWQ?p=preview
On the Mobiscroll Calendar (http://mobiscroll.com/) you can set Marked Dates when initializing the Mobiscroll Calendar. Is there a way to update the Marked Dates after the calendar has been initialized? I can’t seem to find a method for doing so in the documentation.
Example from the documentation:
$(function(){
$('#calendar').mobiscroll().calendar({
marked: { dates: [ new Date(2013, 5, 6), new Date(2013, 5, 10) ] }, // Initially marked days
onMonthChange: function (year, month, inst) {
// Load marked days for (year, month), (year, month - 1), (year, month + 1)
// Update dates only
inst.settings.marked.dates = [ new Date(year, month - 1, 15), new Date(year, month, 15), new Date(year, month + 1, 15) ];
// OR Update the whole marked object (only if necessary)
inst.settings.marked = {
dates: [ new Date(year, month - 1, 15), new Date(year, month, 15), new Date(year, month + 1, 15) ],
daysOfMonth: ['5/1', '12/24', '12/25']
};
}
});
});