I am using glDatePicker plugin.
To change dynamically selected date I call following code where dateDepartureVar is the constructor of glDatePicker object.
dateDepartureVar.options.selectedDate = new Date(2015, 9, 18);
dateDepartureVar.render();
This code changes the selectedDate however when the calendar is opened again, it does not open on the selectedDate, it opens wherever it was left off before.
I need the calendar to open exactly on selectedDate. What am I missing?
Please verify you have correctly obtained an instance of the datepicker when you initialized. here's an excerpt (slightly edited) from the official documentation :
When attaching your input, you can pass true to the second call to the glDatePicker constructor to get an instance of glDatePicker returned. You can also do this while chaining with options:
// Doing it in a single pass
var dateDepartureVar = $('#example1').glDatePicker(
{
showAlways: true,
selectableDOW: [0, 2, 3]
}).glDatePicker(true); //Pass true here
More info here (official docs)
This worked for me.
The trick is set firstDate too.
$('select[name="monthSelect"]').change(function() {
let newDate = new Date((new Date()).getFullYear(), parseInt($(this).val())-1, 1);
$.extend(calendar.options, {
selectedDate: newDate,
firstDate: newDate
});
calendar.render();
});
Related
I need to save the view's state when page is reloaded. In other words, when users refresh the page, they should go back to the month they were before.
I am currently using "datesSet" callback in order to store the current date in localStorage, like this :
datesSet: function( dateInfo)
{
localStorage.fullCalendarDefaultDate = dateInfo.startStr;
}
And when i initialize fullCalendar, i use the "initialDate" parameter to set the default date :
initialDate: localStorage.fullCalendarDefaultDate
The problem is, this is not working in month view. As the "starting day" is not necessarily in the current month (ex below), the month view won't initialize on the correct month when page reloads...
Here, the "starting day" would be March 26th, and FC will init on march on next reload...
Thanks ADyson for the solution :
datesSet: function( dateInfo)
{
var date = new Date(dateInfo.view.currentStart);
localStorage.fullCalendarDefaultDate = date.toISOString();
}
I am attempting to use the inline bootstrap datetimepicker from https://eonasdan.github.io/bootstrap-datetimepicker/
Currently this is in a popup window after the user clicks on a date/time from a table on another page. I was attempting to pass the date/time from the page into datetimepicker and have it set the default date to that provided. If I set option date like:
$('#datetimepicker12').datetimepicker({
inline: true,
sideBySide: true,
date: new Date(1547870400000)
});
});
This will start the picker with the date given but if attempting to populate a variable and use in the same manner results in the current date/time:
var date = '1547870400000'
$('#datetimepicker12').datetimepicker({
inline: true,
sideBySide: true,
date: new Date(date)
});
});
document.write(date);
I added the document.write to confirm my variable is populated correctly which it does return the correct value set higher in the page.
Thanks for any assistance.
Try this-
var date = '1547870400000';
$('#datetimepicker12').data("DateTimePicker").date(new Date(date));
I'm adding fullcalendar.js to an angular app using angular-ui / ui-calendar.
(angularjs 1.3.10, fullcalendar 2.2.6, ui-calendar 0.9.0-beta.1, jQuery 2.1.3, moment 2.9.0 & angular-moment 0.9.0)
In the calendar I'm using the dayClick as a datepicker type function to:
- write the selected date to scope (for other uses in the app)
- update the Event Source Object events array with the selected date
- display the selected date (ie newly updated event) on the calendar
I have no problems completing the 1st two tasks, but the 3rd is not updating automatically.
From the documentation:
An Event Sources objects needs to be created to pass into ng-model.
This object's values will be watched for changes. If a change occurs, then that specific calendar will call the appropriate fullCalendar method.
However it doesn't seem to be updating the calendar this automatically...
Is this a bug in ui-calendar or am I missing something ?
Interestingly if I have the calendar in an ng-if tab, and toggle between the tabs, the calendar updates correctly (after the toggle).
See this jsfiddle and:
- run, then select a date (notice the events array is updated correctly)
- toggle Tab 2 then back to Tab 1 - notice the date now displays correctly...
html looks like:
<div ui-calendar="uiConfig.calendar" ng-model="calendarDate" calendar="myCalendar1"></div>
Controller code looks like
myApp.controller('MainCtrl', function($scope, $filter, moment, uiCalendarConfig){
$scope.calendarDate = [
{
events: [
{
title: 'From',
start: '2015-01-31',
allDay: true,
rendering: 'background',
backgroundColor: '#f26522',
},
],
}
];
$scope.setCalDate = function(date, jsEvent, view) {
var dateFrom = moment(date).format('YYYY-MM-DD'); // set dateFrom based on user click on calendar
$scope.calendarDate[0].events[0].start = dateFrom; // update Calendar event dateFrom
$scope.dateFrom = $filter('date')(dateFrom, 'yyyy-MM-dd');; // update $scope.dateFrom
};
$scope.uiConfig = {
calendarFrom : {
editable : false,
aspectRatio: 2,
header : {
left : 'title',
center : '',
right : 'today prev,next'
},
dayClick : $scope.setCalDate,
background: '#f26522',
},
};
});
PS had a look at this question (which is similar) but was asked quite a few versions ago - plus the suggested solution calendar.fullCalendar('refetchEvents'); doesn't work since the calendar object is not defined - unsure what calendar.fullCalendar would be for my code...
That seems to be a problem with ui-calendar. I haven't been able to solve it so far. However, as a workaround, instead of updating the current event, you can create a new one: just replace $scope.calendarDate[0].events[0].start = dateFrom; by $scope.calendarDate[0].events.push({title: 'From', start: selectedDate, allDay: true, rendering: 'background', backgroundColor: '#f26522'});: http://jsfiddle.net/gidoca/kwsrnopz/.
On a side note, to access the calendar object to call the fullCalendar function, you would use $scope.myCalendar1 - ui-calendar adds it the the scope with a variable of the name given as the calendar attribute in the HTML.
I had the same issues but sorted out by two different ways.
When dynamically loaded the content through $http use uiCalendarConfig addEventSource
uiCalendarConfig.calendars['mycalendar'].fullCalendar('addEventSource', $scope.events);
Incase if calendar toggles visibility and hidden on load use refetchEvents
$timeout(function(){
uiCalendarConfig.calendars['mycalendar'].fullCalendar('refetchEvents');
})
$timeout holds the calendar to compile within the scope
I have a page that uses the jQuery UI datepicker. I'm trying to make the following happen on my page:
click on the date field -> calendar pops up (datepicker takes care of this)
click on a calendar day -> ajax request fires off, does some server-side calculations (checking for scheduling conflicts and the like), and displays a warning if it's a busy day
It's not exactly a validation, as the intent is to display a warning but still allow the user to submit whatever day they want.
What I have so far fires off the ajax, but with the wrong date. I think it's grabbing the date at page-load rather than when a calendar-day is clicked, so I'm guessing datepicker('getDate') is being evaluated at load time. How can I construct this to evaluate dynamically? Here's the current version (in coffeescript):
jQuery ->
$("#rescheduler").click ->
$("td[data-handler='selectDay'] a").click ->
id = getUrlVars()["booking_id"]
newDate = new Date(datepicker.datepicker('getDate'))
postData = {}
postData['booking_id'] = id
postData['date'] = newDate
$.post '/path/to/check_stuff', postData, ((data) -> doStuff), "json"
or, if you prefer native javaScript:
jQuery(function() {
return $("#rescheduler").click(function() {
return $("td[data-handler='selectDay'] a").click(function() {
var id, newDate, postData;
id = getUrlVars()["booking_id"];
newDate = new Date(datepicker.datepicker('getDate'));
postData = {};
postData['booking_id'] = id;
postData['date'] = newDate;
return $.post('/path/to/check_stuff', postData, (function(data) {
return doStuff;
}), "json");
});
});
});
I suspect that what is happening is the date picker sets the date as, say, March 2, 2014 but this is set as UTC time so the value is something like March 2, 2014 00:00:00. Then when you create the new date from the passed in values your timezone gets added to the mix, causing the date to appear to be off.
If this is so (try logging some of the values to see what, exactly, you are working with) then you need to modifying the date picker value to account for time zone.
Something like:
localDate = new Date(dateToFix); //dateToFix would be the value from the date picker
localTime = localDate.getTime();
localOffset = localDate.getTimezoneOffset() * 60000;
adjustedDate = new Date(localTime + localOffset);
Has any one managed to disable dates on sugars date picker before the current date?
I am calling it in a custom programmed module like so:
<script id="script" type="text/javascript">
YAHOO.util.Event.onDOMReady(function()
{
var now = new Date();
Calendar.setup ({
inputField : "date",
ifFormat : cal_date_format,
daFormat : "%m/%d/%Y %I:%M%P",
button : "date_start_trigger",
singleClick : true,
step : 1,
weekNumbers: false,
startWeekday: 0
});
});
There is no upgrade safe way to do this.
But have solved it by adding a parameter in include/javascript/calendar.js
Search for line calendar.cfg.setProperty("selected" just after that line add following code
if(typeof(params.customMinDate) != 'undefined')
calendar.cfg.setProperty("minDate", params.customMinDate);
And then in your calendar setup array, you should add following param,
customMinDate : new Date(),
And that should now disable all dates in past. But this works on for the calendar pops up on text field, and not when you click on calendar image.
If you find its solution, do share here, which will help others and me too.
I hope SugarCRM will overcome this limitation and make it more flexible in future releases.