When setting locale to Japanese in Fullcalendar and use dayGridMonth View, for each day cell suffix "日"(means day) is added.
I want to remove this day suffix letter, so that the appearance of the cell would be just numbers.
I looked through the document but I couldn't find it.
This behavior can be checked in official demo by setting locale to "ja".
https://fullcalendar.io/docs/locale-demo
I want my day cells to show only numbers, without suffix.
I have read the source code of FullCalendar. It uses Intl.DateTimeFormat to convert date format as below.
https://github.com/fullcalendar/fullcalendar/blob/f86b5f33148cb43178e21c46a6ea814d128a88e1/src/core/datelib/formatting-native.ts#L165
I couldn't find how to customize the format. A possible dirty hack is to fork the repository and remove "日" character after following code.
https://github.com/fullcalendar/fullcalendar/blob/e73621e5c9bcf6778c07cc5a29a4b0641d3ac46e/src/daygrid/DayGrid.ts#L390-L395
html = html.replace('日', '');
There's a option called dayCellDidMount in FullCalendar, which could be called for do something after dayCell has been added.
https://fullcalendar.io/docs/day-cell-render-hooks
So you could replace the original dayText with your custom Text when call this.
code for example:
var calendar = new FullCalendar.Calendar(calendarEl, {
...,
dayCellDidMount: function(info){
var day = moment(info.date).format('DD') // custom the text for example
// hide the original one
var originElement = info.el.querySelectorAll(".fc-daygrid-day-number")
originElement.forEach(e => e.classList.add("d-none") );
// insert new text
var targetElement = info.el.querySelectorAll(".fc-daygrid-day-top");
targetElement.forEach(e => e.innerHTML = day );
},
})
and then you can customize css .fc-daygrid-day-top for the view.
Related
I have a Google Forms to get my delivery order from customer and on the forms I have Date field.
The response of the forms will be filled automatically to order document per response.
I use this scripts:
function autoFill(e) {
var timestamp = e.values[0];
var nama = e.values[1];
var tglBuat = e.values[10];
var file = DriveApp.getFileById(MY_TEMPLATE_FILE_ID);
var folder = DriveApp.getFolderById(OUTPUT_FOLDER_ID);
var copy = file.makeCopy(nama+"_"+timestamp, folder);
var doc = DocumentApp.openById(copy.getId());
var body = doc.getBody();
body.replaceText('#NamaLengkap#', tglBuat);
body.replaceText('#TanggalDibuat#', tglBuat);
doc.saveAndClose();
}
The flow is simple like this:
I prepared Template file for the Order Document paper
Customer will fill the forms
Form result will be kept in certain Google Spreadsheet
The script above on the (3), will be triggered everytime (2) submitted
Voila, I have Order Document filled with customer order details
My template file are something like this:
Customer Name: #NamaLengkap#
Order Date: #TanggalDibuat#
My problem is here in date format, I want the output on my template file using this format "26 August 2020", but the google form only give this format "08/26/2020".
How do I changes it?
I read some article about changing the email format before filling the form, but i don't think this is good solution. Because customer wont care at all.
Solution
You just need to take your date and convert it to a Date String Javascript object as shown below:
function myFunction() {
var shortDate = new Date("03/25/2015");
var longDateFormat = shortDate.toDateString();
Logger.log(longDateFormat);
}
I hope this has helped you. Let me know if you need anything else or if you did not understood something. :)
I'm using Fullcalendar and I need to allow event overlap for one day: the last still event day can overlap on the first new event day.
For resizing and drop I resolved in this way:
eventOverlap: function(stillEvent, movingEvent) {
var a = movingEvent.start.startOf('day');
var b = stillEvent.end.startOf('day');
if(a.unix() == b.unix()){
return true;
}
return false;
}
Now I need to do the same on selecting, according to documentation, I have to use selectOverlap option by define a function, but differently of eventOverlap, this function not have an argument that include the current selection period, then I don't know how to make the check.
Somebody can say me how to do so?
UPDATE 19/05/2017:
I opened an issue on github's project repository here
I have three fields created via ACF with Datepicker: event start date, event end date and survey start date.
What I want to achieve is when I set date via datepicker on event start date, then this date is copied to event end date and survey start date.
I googled almost everything and no code is working. Actually, the nearest working solution is below:
acf.add_action('load', function( $el ){
var $field_start_date = $el.find('.acf-field-5800010541984');
var $field_end_date = $el.find('.acf-field-5800014941985 .input-alt');
$field_start_date.change(function() {
var $field_start_date_value = $('#acf-field_5800010541984').val();
$('#acf-field_5800014941985').datepicker( 'setDate', $field_start_date_value );
});
Value is copied to another field (event end date) – attribute value is changing – but copied value doesn't show on input.
BTW, $('#acf-field_5800014941985').datepicker('update'); doesn't work too.
Like Leeloo in The Fifth Element – "Pleeeeeeeeeeeeeese. Heeeeeeeeeeeeeelp"
Best regards,
Milosz!
I want the users to see only the country names when they type on the search box. Is it possible?
I've tried this (doesn't work):
var options = {
types: [('regions')]
};
var searchBox = new google.maps.places.SearchBox(input, options);
Google lets you to use some properties for getting the data like you want.You can set to it language and anything else.
Here is a link,which will help you.
http://www.w3docs.com/learn-javascript/places-autocomplete.html
I have a Javascript object that basically represents a Row in an .NET GridView.
When a user clicks on any row in the grid, all the input elements in that row are 'enabled'.(ie 'Edit' mode).
I run this code depending on which row is selected
$(":input", this._row).attr('disabled', true);
or
$(":input", this._row).removeAttr('disabled');
So far so good. Now, I want to keep track of the values in that row before a user enters the 'Edit Mode', so i can restore the original values if they decide to click out of that row without saving any changes that they made.
So i capture the original values in an array by doing this:
var $inputs = $(":input", this._row);
var values = {};
$inputs.each(function(i, el) { values[el.name] = $(el).val(); });
the 'values' array now looks like this:
ctl00$ContentPlaceHolder1$resultsGrid$ctl04$COMPONENT1 "56"
ctl00$ContentPlaceHolder1$resultsGrid$ctl04$COMPONENT2 "98"
ctl00$ContentPlaceHolder1$resultsGrid$ctl04$COMPONENT3 "08"
ctl00$ContentPlaceHolder1$resultsGrid$ctl04$COMPONENT4 "200"
Great so far. The user may then modify these values, but decide not to save the changes.
So i need to restore this row back to it's orignal values from the 'values' array.
Can someone tell me the best way to do this? Im hoping it's something simple, but i'm no jquery expert, yet..
thanks
You can use the 'data method' (http://docs.jquery.com/Internals/jQuery.data) to store relevant data along with the element.
Something like:
//Call this function for each row after the page has loaded.
function storeOriginalData(row)
{
var $inputs = $(":input", row);
//For each input element inside the table row, we store it's original value
//using the 'data' method of jQuery.
$inputs.each(function(i, el) { $(el).data('oldValue', el.val()); });
}
//Call this function from the reset button code.
function resetOriginalData(row)
{
var $inputs = $(":input", row);
//Now we get the original value using the data method and store it in the input element.
$inputs.each(function(i, el) { $(el).val($el.data('oldValue'));
};
This way, you will avoid the maintenance of the 'values' object for each row.
EDIT:
Modified code with more details and how it works.
I haven't had the time to set up a test, but off of the top of my head I would try:
$inputs.each(function(i, el){ $(el).val(values[el.name]); });
Assuming you have already checked that values have been stored.
Could you not copy the row html and store it, and then if they changed there mind you could just restore the original row?