I need to do Validation for both Start Time And End Time, if start time is greater then end Time Throw and error.
How Can i achieve this.
Which Events do i need to use to get the validation done onselect, onclose??
Please Help me out
Thanks
You can do this using onSelect event making changes to the mobiscroll.
Here is an example i tried.. you might find useful
onSelect: function (dateText, inst) {
var newMinDate, newMaxDate;
endDate = new Date(dateText);
var newEndDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 5);
$endCal.mobiscroll('setDate', newEndDate);
newMinDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1),
$endCal.mobiscroll('option', {
minDate: newMinDate
});
}
https://jsfiddle.net/sarvesh310/742Lqagk/2/
You can dynamically set the minDate and maxDate options in the onSelect event, e.g.:
$('#end_time').scroller('option', 'minDate', $('#start_time').scroller('getDate'));
A working example (does not allow to select a start date > end date):
http://jsfiddle.net/dioslaska/2MVv6/1/
This works with date and datetimepickers as well.
Related
How can I get the start and end time of visible days in fullcalendar?
I need it for use in another javascript instance. Is there some function like -
uiCalendarConfig.calendars['myCalendar1'].fullCalendar('getView').visStart
?
According to full-calendar documentation (jQuery plugin on on which the uiCalendar is based on) when you call fullCalendar('getView') you get back the View object with properties:
start
A Moment that is the first visible day.
end
A Moment that is the exclusive last visible day.
So you should be able to get start and end moments as follows:
uiCalendarConfig.calendars['myCalendar1'].fullCalendar('getView').start
and
uiCalendarConfig.calendars['myCalendar1'].fullCalendar('getView').end
Following example shows fullcalendar in angular 2. Should be easily adaptable to your environment. You can use the "viewRender" callback of fullcalendar to maintain the current visible date range. Useful if you intend to fetch business objects only relevant for the visible date range, etc.
var calendarDiv: any;
var self = this;
calendarDiv = $(this.elementRef.nativeElement).find('#calendar');
calendarDiv.fullCalendar({
defaultView: "agendaWeek",
...
viewRender: function (view: any, element: any) {
self.crtCalendarStart = view.start;
self.crtCalendarEnd = view.end;
self.myFilterService.setFilter("filter_plandate", {
type: 'DateTime',
value_from: view.start.toDate(),
value_to: view.end.toDate()
});
},
selectable: true,
selectHelper: false,
...
});
I want the current local(to browser) date with Time zone in the following format:
26-Apr-2016 15:56:18 EDT
I have tried using moment.js but it shows date with timezone like GMT -04:00. Also tried this, but it didn't help.
var dateDDMMMYYYYFormate = $filter('date')(new Date(input), 'dd-MMM-yyyy HH:mm:ss');
var dateWithUtc = moment.utc(dateDDMMMYYYYFormate);
var localDate = moment(dateWithUtc).local();
Any help is appreciated.
Since new Date() creates a JavaScript date object, you want to change the moment object into a date object:
var localDate = moment().toDate();
I have tried to implement the recurring frequency on Angular UI-calendar but still didn't get any angular plugin.I need help in creating recurring event.If you can please give any reference plugin or directive to create recurring event.
I got Ui-calendar from here calendar downloaded link
Thanks in advance !!
I leveraged the fact that, on a view switch of the calendar, the Arshaw calendar can employ an events functions (http://fullcalendar.io/docs/event_data/events_function/).
First assemble the array of repeating events in your service into an 7-slot array of arrays, one slot for each day of the week. Put this on the scope. Then when you open up or switch the calendar view, iterate from the start day to the end day of the function, and insert an event that matches your recurrence type.
function eventFunction(start, end, timezone, callback) {
var events = [];
for(var date = start; date <= end; date.setTime( date.getTime() + MS_PER_DAY )){
_.forEach($scope.calendar.repeating[date.getDay()], function(repeater){
var repeaterStart = date.getTime() + // date
repeater.start - new Date(repeater.start).setHours(0,0,0,0); // time
events.push({ _id: repeater.id, start: new Date(repeaterStart), title: repeater.headline})
})
}
callback(events);
}
I've setup a calendar using FullCalendar with Angular UI. It works fine, I can toggle categories of events nicely, but every time the eventSource is updated the calender view is set to the current date.
I've tried using the gotoDate method and I can see that it works (it also works from the console), but almost immediately after the calender is reverted to the current date. As I'm new to AngularJS I've probably put the gotoDate in the wrong place. But I'm clueless were to put it elsewhere.
I'm using a service that returns a bunch of event objects and pushes them into eventSources, the ng-model of the calendar element. Nothing special, in the controller I have:
$scope.eventSources = [];
var promise = UserCalendarEvents.get(groupName);
promise.then(
function(events) {
$scope.eventSources.push(events);
$('#events-calendar').fullCalendar('gotoDate', 2012, 11);
},
function(reason) {
console.log('Error: ' + reason);
}
);
In this case events are fetched and $scope.eventSources is populated. The calender view is then set to december 2012 and after that, almost instantly, the view swithes to current date. Is it some kind of watch of the ng-model that rerenders the fullcalender and if so how can I set the date of choice?
Update: I ended using joshkurz fix, but in a modified version that honors the selected view, ie if the user has selected basicWeek and changes source data the view shouldn't change to for example month view. That's what I need for my users.
function update() {
scope.calendar = elm.html('');
var view = scope.calendar.fullCalendar('getView');
var m;
var xtraOptions = {};
//calendar object exposed on scope
if(view){
var viewDate = new Date(view.start);
if(m !== 'Invalid Date'){
y = viewDate.getFullYear();
m = viewDate.getMonth();
d = viewDate.getDate();
if(!isNaN(y) && !isNaN(m) && !isNaN(d)){
xtraOptions = {
year: y,
month: m,
date: d
};
}
}
view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
}
/* If the calendar has options added then render them */
var expression,
options = { defaultView : view, eventSources: sources };
if (attrs.uiCalendar) {
expression = scope.$eval(attrs.uiCalendar);
// Override defaultView if is set in ui-calendar attribute - OK?
if (expression.defaultView) {
expression.defaultView = view;
}
} else {
expression = {};
}
angular.extend(options, uiConfig.uiCalendar, expression, xtraOptions);
scope.calendar.fullCalendar(options);
}
This is a bug with the calendar. You are the first one to say anything about it on StackOverflow. Kudos.
There are a couple of ways that this could be fixed. Its been proposed on github https://github.com/angular-ui/angular-ui/pull/520 that we do away with how the directive re-creates itself anytime the watch is fired, which would stop this behavior. I believe that if we can get this method to work in production then it will be the best solution.
Until then however the fix is to get the current month from a date object created from the view.start field. This month should be added to the options which are used to render the calendar.
Here is a snippet of what the new update function should look like inside of the calendar directive.
/* update the calendar with the correct options */
function update() {
scope.calendar = elm.html('');
var view = scope.calendar.fullCalendar('getView');
var m;
var xtraOptions = {};
//calendar object exposed on scope
if(view){
var d = new Date(view.start);
m = new Date(view.start);
if(m !== 'Invalid Date'){
m = m.getMonth();
if(!isNaN(m)){
xtraOptions = {
month: m
};
}
}
view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
}
// console.log(m)
/* If the calendar has options added then render them */
var expression,
options = {
defaultView : view,
eventSources: sources
};
if (attrs.exCalendar) {
expression = scope.$eval(attrs.exCalendar);
} else {
expression = {};
}
angular.extend(options, uiConfig.exCalendar, expression, xtraOptions);
scope.calendar.fullCalendar(options);
}
This has not been properly tested on the angular-ui CI server, but it works fine as I am using it in production currently.
With AngularUI wrapping FullCalendar in a directive for you, the calendar object can be accessed via $scope.calendar. "The AngularJS Way" is to avoid direct DOM manipulation in controllers.
In your particular case, you'd write this instead:
$scope.calendar.fullCalendar('gotoDate', 2012, 11);
AngularUI does have a watch on eventSource and event that calls an update function every time the length of either changes. You can view the source here:
https://github.com/angular-ui/angular-ui/blob/master/modules/directives/calendar/calendar.js
You can see that the calendar object at $scope.calendar gets recreated with a new set of events everytime the event model changes. This is why your date change isn't going through -- the event is being added, triggering the update, your date change goes in, the whole calendar is changed and your date change is lost.
Two (not the best) things pop up at me without changing AngularUI's code:
You can use AngularJS's $timeout service and wait a set
time after events are loaded, the calendar is finished updating,
then call your date change.
You can add a $watch on the scope that triggers your date change
everytime the calendar object changes:
http://plnkr.co/edit/Ww08VX?p=preview
I created that example above. In the test() method, I'm just loading some fake data into events via a promise (they'll be added in March 2013) then changing the date to December 2012. I'm watching $scope.calendar and everytime it changes (an update is triggered in the directive) I resend the date command. You should be sent to December 2012 without even seeing the new events go in, but if you go back to March 2013, they should be there. I stuck the watch in another .then assuming you'll use some value that's returned to set the date dynamically.
Another way to solve the issue without changing the Angular-UI source is to declare the calendar like this:
<div ui-calendar="{viewDisplay:viewDisplayHandler,month:monthVal,year:yearVal}" ng-model="eventsArr"></div>
And to have a viewDisplayHandler function in the scope that sets monthVal and yearVal to the appropriate values in order to have the date on the calendar set after the whole calendar recreation:
$scope.viewDisplayHandler = function(view) {
var viewStart = view.start;
$scope.yearVal = viewStart.getFullYear();
$scope.monthVal = viewStart.getMonth();
}
This is how i solved it before issuing the pull request on GitHub; it's not the optimal method i guess, but i have been using it in production for a while and it seems to be ok and does not require changing Angular-UI's code.
I've added the calendar from http://www.dynarch.com/projects/calendar/old/ onto my wordpress site. It loads fine but I don't want people to select dates in the past which I've managed to do but want to add a strikethrough but don't know how. Please help.
Thanks
http://www.dynarch.com/static/jscalendar-1.0/doc/html/reference.html#node_sec_5.3.7
You need your own disabled date handler
For example
function disallowDate(date) {
// date is a JS Date object
var d=new Date();
if ( date.getTime() < d.getTime()) {
return true; // disable anything less than today
}
return false; // enable other dates
};
calendar.setDisabledHandler(disallowDate);