I am trying to set visibleRange manually, I have start and end in props, and when component loading in React I am trying to
calendarRef.current.getApi().view.calendar.setOption('visibleRange', {
start: formatDate(new Date(from)),
end: formatDate(new Date(to)),
});
Also was trying to set via props
visibleRange={
{
start: format(new Date(from), 'yyyy-MM-dd'),
end: format(new Date(to), 'yyyy-MM-dd'),
}
}
The problem is that when I click prev/next I send Inertia.visit() to the server and receive events list and dates from/to but the component is fully re-rendered because of SSR (Inertia) and Callendar shows then initial dates because i have needed dates i want to set it to it but not success.
But nothing works
It still shows the range of the current week.
Can someone help me with how I can do it? Thanks.
This works, i still don't understand what visibleRange do, but to set manually date you have to use 'gotoDate()'
calendarRef.current.getApi().view.calendar.gotoDate(formatDate(new Date(from)));
Related
I'm using the standard FullCalendar Events(as a json feed) and have everything working fine...almost.
var calendar = new Calendar(calendarEl, {
events: '/myfeed.php'
});
My initial view is a 'dayGridMonth' so the FC default behavior is to only retrieve the events for that month by appending the startParm/endParam querystring.
This is not what I want.
On the backend of this request, I'm currently sending the entire calendar feed (ignoring the start/end params) so I don't have to keep hitting my AJAX '/myfeed.php' page every time somebody clicks on "Next" to view the next month.
However, I can't get FullCalendar to know that it already has the whole json feed and not to bother getting anything else - just show the next month from the data we have. I've played around with lazyFetching but that seems to force that it goes to the AJAX call every time.
Any ideas on how I do this?
Thx!
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]))
Can someone help me, I want to add time and date to an app without the user having to insert this.
I have figured out how to fix the Date, but not the time.
Can anyone help me ?
Loading a text widget automatically on page refresh
Well, I'm kind of new to appmaker so this isn't necessarily the easiest way to to it. But this works. I added a new text widget named todaysDate to the screen as shown below:
Then I went into clientside script and added this code in ready function.
$(function(){
google.script.run
.withSuccessHandler(upDateToDaysDate)
.getTodaysDate();//this code
google.script.run
.withSuccessHandler(upDateLastRecipient)
.getLastEmailRecipient();//this was already there
});
And I added this function above it because it appears that functions have to be defined before they are used.
function upDateToDaysDate(s){
app.pages.Email.descendants.TodaysDate.value=s;
}
And then in server script I added this function:
function getTodaysDate(){
return Utilities.formatDate(new Date(),Session.getScriptTimeZone(),"E MMM d, yyyy");//for time just add HH:mm:ss to the format parameter
}
When you load the page or preview, the the ready function will call the server script and it will return todays date and upDateTodaysDate() will load it into the todaysDate text widget.
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.
I was developing an app that in the first state you choose a date range using dataFields then you press a button to go to another state and generate a datagrid showing an employee list and another scrollable datagrid with its columns generated dynamically having the worked hours for every employee in every date.
The step sequence to get the error message is:
You choose a date range for example: from 01/01/2013 to 01/31/2013
You press generate button (The app change the currentState = "EmployeeList" and all is OK)
You press the back button (you return to initial state and all is OK)
If you change the date range having more days than before date range then all is OK
If you change the date range having less days than before date range then next error is reached
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.controls.dataGridClasses::DataGridBase/http://www.adobe.com/2006/flex/mx/internal::columnHeaderWordWrap()
at mx.controls.dataGridClasses::DataGridItemRenderer/validateProperties()
at mx.managers::LayoutManager/validateClient()
at mx.controls.dataGridClasses::DataGridHeader/updateDisplayList()
at mx.core::UIComponent/validateDisplayList()
at mx.managers::LayoutManager/validateDisplayList()
at mx.managers::LayoutManager/doPhasedInstantiation()
at mx.managers::LayoutManager/doPhasedInstantiationCallback()
and if you google it then some results take to visit apache bug reporting site
https://issues.apache.org/jira/browse/FLEX-22108
And there is no more...
But I found how to solve it!
To solve it first of all I was googling a lot and i looks like no one got this error and I discover that is a Flex Bug reported to Apache. And I was analyzing the original code from DataGrid.as and DataGridColumn.as to think about a possible solution and I was making some tests and nothing work.
What I did and I hope it will be useful to someone
when you click the back button, inside the backbutton_clickEventLister() and before currentState="";
I just set columns array to new Array();
protected function bttnBack_clickEventHandler(event:Event) : void {
// This code line solved it
dtGrdWorkedHours.columns = new Array();
// Make sure of code it before state change stament
currentState = "";
}