We Keep Coding

Checking if date has changed with React/Redux + Moment.JS

I have a React+Redux application, and I display the date in it using Moment.js. I want a function to run when the date changes.
Right now I have a function to check the date:
checkDate(local) {
if (local === null) {
localStorage.setItem('date', moment().format('MM-DD-YYYY'));
} else if (moment(local).isBefore(moment().format('MM-DD-YYYY'))) {
this.props.resetAll(); // This calls an action.
}
}
And if I call it manually, or refresh the page when the date changes, it works just fine. But, I want to be able to have my application run that this.props.resetAll() line on its own without my having to refresh the page. What would the best way be to go about it? Should it be something that happens on the Redux side of things in an action or reducer? Should I have checkDate() be called every X seconds or so somewhere in the component lifecycle (if so, where)?
Thanks in advance for any help!

I would set a timeout until 24:00 which then calls the update function:
moment() is defined as the current date/time, to get the difference to a specific time, you can use the .diff() function. So for example if you want the milliseconds till the start of the next day:
var msTillEndOfDay = moment().endOf('day').add(1, 'seconds').diff(moment(), 'milliseconds');
.endOf('day') would be 23:59:59 so you just add 1 seconds to have the next day.
You then simply set the Timeout with the specific update function or dispatch the right action:
setTimeout( () => {
this.props.dispatch({type: 'UPDATE_DATE'})
}, msTillEndOfDay);

jQuery function evaluation timing

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);

Disable past dates on dhtmlx Mini Calendar

I have implemented DHTMLX schedules to show events on my website. Scheduler on dashboard also have DHTMLX calendar which used to select week for dhtmlx scheduler.
here is an sample:
http://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html
Here is my code that I've written to generate DHTMLX calendar.
var calendar = scheduler.renderCalendar({
container:"cal_here",
date:scheduler._date,
navigation:true,
handler:function(nwdate,calendar){
var date = new Date(nwdate);
getdate=date.getFullYear()+ '-' + (date.getMonth() + 1)+ '-' +date.getDate();
scheduler.setCurrentView(date, scheduler._mode);
}
});
I went through documentation but couldn't find anything helpful.

Updated :
You can use the setSensitiveRange
http://docs.dhtmlx.com/doku.php?id=dhtmlxcalendar:api_method_dhtmlxcalendar_setsensitive
Pass null as a second parameter

You can initialize Date for your html Calendar
Add this code in the form_load!
> scheduler.InitialDate = new DateTime(2015, 01, 01);
You might want to know more, visit the following site;
http://blog.scheduler-net.com/post/simple-event-calendar-asp-net.aspx

Sugarcrm date picker disable dates before current date

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.

add events to full calendar and store them on mysql through servlet callback

i'm new to the full-calendar jquery plugin, i have integrated the calendar in a jsp page. When the page loads, events are loaded from a MySQl database calling a servlet that generates JSON array of retrived elements.
so far all works fine.
now i'd like to add events on calendar from client side using javascrip, i can't figure out how to make a callback function to a servlet to store the new event in the mysql DB.
i've tried to read the documentation but i'm still clueless about it.
any good advice ?
thanks

You need to bind functions to the various fullcalendar event handlers. For example, you might have a Facebox overlay (or something simpler like a popup window) appear whenever a "day" is clicked.
For example, inside your fullCalendar definition:
dayClick: function(date, allDay, jsEvent, view) {
var year = date.getFullYear();
var month = date.getMonth();
month++;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
$.facebox({ajax: '/addeditevent.php?year='+year+'&month='+month+'&day='+day+'&hour='+hour+'&minute='+minute});
}
In this case, you would have addeditevent.php present a form for the user to add an event to your database.
Once the event is added to the database, make sure to call refetchEvents http://arshaw.com/fullcalendar/docs/event_data/refetchEvents/ to update the calendar for the user.