I am trying to use Fullcalendar in AngularJS.
I somehow implemented the calendar and it works (saves data to the SQL).
However, if I click on the day in the calendar, the modal pops up and the start date shows 00:00:00 in time aspect.
My questions is how can you set the time for the hour of current time?
If it is 9AM currently, then, how can the time in the start initialize the time as 09:00:00 ?
This is what I have for the coding.
select: function(start, end) {
$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
}
I have a feeling that it would be nice to somehow modify the code below and place it within the above code, but I am stuck on where to put it.
var time = new Time();
var h = date.getHour();
I don't know it the Time() even works (it was Date() from other source).
Please can anyone help me on initializing the hour in the Fullcalendar based on the current hour? I am looking for any advice or even a hint to solve this matter.
Thank you in advance!
You can use momentJS to add the current (local) system time to the selected day:
select: function(start, end) {
var today = moment();
start.set({ hours: today.hours(), minute: today.minutes() });
$('#ModalAdd #start').val(start.format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(end.format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
}
See https://momentjs.com/docs/#/get-set/set/
Also it's worth mentioning that start and end are already moments, so you don't need to wrap them in the moment constructor again as you were doing before.
Another thing to consider if you do this, is whether your calendar has other views available, in particular the agenda-style views, on which selections can be made which would trigger the modal? If so, then you need to ensure that the time-manipulation code above only runs when the view is "month", because the agenda view will, by default, already use the time that the user actually chose on the calendar.
Related
New appmaker user here.
I'm trying to port the work permits approval "app" I made with G Suite form+spreadsheet+GAS; users should enter the day, the start and end time of the permit.
I can see from the Forum Sample that the Date field type is a DateTime field type, so I can use it in my model.
The problem is I cannot find the time picker in the widgets, and the date box has no option to also enter the time.
Am I missing something?
Time Pickers for App Maker
I read your question and thought I'd try to role one of my own and this is what I came up with. I put all of the buttons on a pageFragment and call it with app.showDialog(app.pageFragments.timePicker2);
I only use clientside script.
function updateOutput(){
var h=app.pageFragments.TimePicker2.properties.hour||'00';
var m=app.pageFragments.TimePicker2.properties.minute||'00';
var s=app.pageFragments.TimePicker2.properties.second||'00';
var t=h + ':' + m + ':' + s;
app.pageFragments.TimePicker2.descendants.timeLBL.text=t;
return t;
}
function updateHour(v){
app.pageFragments.TimePicker2.properties.hour=v;
updateOutput();
}
function updateMinute(v){
app.pageFragments.TimePicker2.properties.minute=v;
updateOutput();
}
function updateSecond(v){
app.pageFragments.TimePicker2.properties.second=v;
updateOutput();
}
Here's what my time picker looks like:
Yes. Adding all of the buttons is a nuisance but there are a few features about AppMaker that make it more tolerable.
First you can assign the TimePicker form properties which I use as global properties. I had three hour,minute and second.
Then after you add all of the hour buttons you can grab all of them at one time by clicking each one while holding down control on a windows machine and click on the onClick event and pick custom action and type this in updateHour(widget.text); the code completion won't give you text as an option but type it any way.
I just figured out how to grab the buttons all a one time by pushing shift and selecting with the mouse
Do the same thing with the minute and second buttons using updateMinute(widget.text) and updateSecond(widget.text); This saves you a lot of time typing all of the functions into each widget control panel. Also you don't have to bother giving all of the buttons special names like I did.
But you might like to format them with the following css.
And again you can grab all of the buttons at one time and change the following setting:
That way you can style all of the buttons at one time.
My save button just copies the final string into a label on the main panel.
app.pages.Testing.descendants.timeLBL2.text=app.pageFragments.TimePicker2.descendants.timeLBL.text;
app.closeDialog();
You will probably want to do something more elegant.
Here's a demo: in preview mode. Sorry about the 24 hour clock. I always use this for my own stuff because it's so much easier and I like it. You'll probably want AM & PM. I'll probably go back and do that too.
For an AM/PM Picker I used these functions:
function updateOutputAP(){
var h=app.pageFragments.TimePicker3.properties.hour||'00';
var m=app.pageFragments.TimePicker3.properties.minute||'00';
var s=app.pageFragments.TimePicker3.properties.second||'00';
var ap=app.pageFragments.TimePicker3.properties.ap||' ';
var t=h + ':' + m + ':' + s + ' ' + ap;
app.pageFragments.TimePicker3.descendants.timeLBL.text=t;
return t;
}
function updateHourPM(v){
app.pageFragments.TimePicker3.properties.hour=v;
app.pageFragments.TimePicker3.properties.ap='PM';
updateOutputAP();
}
function updateHourAM(v){
app.pageFragments.TimePicker3.properties.hour=v;
app.pageFragments.TimePicker3.properties.ap='AM';
updateOutputAP();
}
function updateMinuteAP(v){
app.pageFragments.TimePicker3.properties.minute=v;
updateOutputAP();
}
function updateSecondAP(v){
app.pageFragments.TimePicker3.properties.second=v;
updateOutputAP();
}
And this is what my picker looks like:
Now that I know how to pick the components easily with the mouse it was a break to make this change.
Three AppMaker Time Pickers:
At this time App Maker doesn't provide out of the box Time or Date/Time picker widgets, it means that you need to implement one by yourself. There are at least two ways to accomplish this task:
App Maker way
Wait and hope when App Maker will introduce Time or Date/Time picker widget or use existing App Maker widgets to emulate Time Picker. Calendar Sample can be a good starting point:
Hack into DOM/JS
If you have no concerns about cross-browser compatibility and you are OK to get you hands dirty with DOM manipulation by javascript, creating events listeners and other cool stuff, then you can play with HTML widget and native date/time or time input, or even some third party library.
One simple option would be to simply use a textbox and set the validation in the model field.
You can update your Date object on save or just use as is depending on your application. You get the benefit of auto validation errors in the UI to guide your user and it takes only seconds to set up.
Regex:
\b((1[0-2]|0?[1-9]):([0-5][0-9]) ([AaPp][Mm]))
Create an event parameter allDay = true (end = null). And then using the updateEvent method changing the end time of the event. All good, but the end time is saved with less 12 hours (time zone). How can I fix this?
With the start time of the event this doesn't happen.
Thanks for the link. Now I will consider.
With the problem figured out. In the properties fullcalendar installed " 'timezone':'local'". Somehow a method of "updateEvent" transforms the end time (the start time does not change) events to UTC time.
So now clearly indicate the start and end times of the event:
moment.parseZone("2017-10-05T17:00").utc().format()
or
moment.parseZone("2017-10-05T17:00").local().format()
We provide the ability for a user to select their own timezone and call the following when a different timezone is selected (using moment.tz for the options)
$('#calendar2').fullCalendar('option', 'timezone', object.options[object.selectedIndex].value || false);
This works great when viewing appointments etc. However, when a user tries to drag/drop an appointment, it appears to revert back to their "local" PC time to calculate the UTC time value on eventDrop
example:
fullcalendar timezone: 'America/New_York' (but my pc timezone is set to pacific)
Drag event 4pm apt to 12pm. eventDrop
eventDrop: function(event,eventDelta,revertFunc, jsEvent, ui, view) {
event.start.format()
}
Output:
2016-12-23T12:00:00-08:00
You can tell based on the -8:00 offset that it is getting this from my local PC and not from the timezone that was set to 'America/New_York' and it should be -5:00. What is the best way to handle this?
UPDATE: I figured this out using the following code. Basically, you need to take care of converting the timezone yourself. Fullcalendar does not do this for you.
strStartDate = event.start.format("YYYY-MM-DD HH:mm:ss").toString()
var start = moment.tz(strStartDate, $('[data-id="timezone-selector"]').find(':selected').val());
objFCC.saveObject(event.appointmentId, start.valueOf() , mins, strResource, function(result, event)
I'm working on a WebAPI that schedules Events and appointments.In order to do that, I am using the chroniton.NetCore package. I am able to set the schedule using a cron expression or other functions, but is there any way to set a stop date or termination date for the schedule?
var schedule = new EveryXTimeSchedule(TimeSpan.FromSeconds(5));
var scheduledJob = singularity.ScheduleParameterizedJob(
schedule, job, "Hello World", true); //starts immediately
I wish to stop this job on the next day at midnight without using Task.Delay(since the api is stateless)
Thank you.
Current version of chroniton.NETCore does not support such behaviour out of the box. You can implement your own logic based on fact, that you have information about time range.
ScheduleParameterizedJob() returns an IScheduledJob which can be used to cancel the job if needed. You can create additional RunOnceSchedule to close your first job on the next day at midnight using
Singularity.Instance.StopScheduledJob(IScheduledJob job);
you can inherit from EveryXTimeSchedule and override NextScheduledTime method to return Chroniton.Constants.Never if 'next scheduled time' is >= the next day at midnight;
Best way to create a Midnight DateTime in C# :
DateTime nextDayAtMidnight = DateTime.Today.AddDays(1)
guys!
I'm developing an online auction with time limit.
The ending time period is only for one opened auction.
After logging into the site I show the time left for the open auction. The time is calculated in this way:
EndDateTime = Date and Time of end of auction;
DateTime.Now() = current Date and Time
timeLeft= (EndDateTime - DateTime.Now()).Seconds().
In javascript, I update the time left by:
timeLeft=timeLeft-1
The problem is that when I login from different browsers at the same time the browsers show a different count down.
Help me, please!
I guess there will always be differences of a few seconds because of the server processing time and the time needed to download the page.
The best way would be to actually send the end time to the browser and calculate the time remaining in javascript. That way the times should be the same (on the same machine of course).
Roman,
I had a little look at eBay (they know a thing or two about this stuff :)) and noticed that once the item is inside the last 90 seconds, a GET request gets fired every 2 seconds to update the variables in the javascript via a json response. you can look at this inside firebug/fiddler to see what it does.
here is an example of the json it pulls down:
{
"ViewItemLiteResponse":{
"Item":[
{
"IsRefreshPage":false,
"ViewerItemRelation":"NONE",
"EndDate":{
"Time":"12:38:48 BST",
"Date":"01 Oct, 2010"
},
"LastModifiedDate":1285932821000,
"CurrentPrice":{
"CleanAmount":"23.00",
"Amount":23,
"MoneyStandard":"£23.00",
"CurrencyCode":"GBP"
},
"IsEnded":false,
"AccessedDate":1285933031000,
"BidCount":4,
"MinimumToBid":{
"CleanAmount":"24.00",
"Amount":24,
"MoneyStandard":"£24.00",
"CurrencyCode":"GBP"
},
"TimeLeft":{
"SecondsLeft":37,
"MinutesLeft":1,
"HoursLeft":0,
"DaysLeft":0
},
"Id":160485015499,
"IsFinalized":false,
"ViewerItemRelationId":0,
"IsAutoRefreshEnabled":true
}
]
}
}
You could do something similar inside your code.
[edit] - on further looking at the eBay code, altho it only runs the intensive GET requests in the last 90 seconds, the same json as above is added when the page is initially loaded as well. Then, at 3 mins or so, the GET request is run every 10 seconds. therefore i assume the same javascript is run against that structure whether it be >90 seconds or not.
This may be a problem with javascript loading at different speeds,
or the setInterval will trigger at slightly different times depending on the loop
i would look into those two