I need to allow the user to select a date/time span to create a new event. I have the code that opens the new event when clicking on a day and I can get the date and time selected, but it returns only the start date and time. I don't know how to allow the user to select more than one time/date span, or how to capture the end date/time.
Inside my fullCalendar definition, I have:
dayClick: function (date, allDay, jsEvent, view) {
var startDate = date._d.toISOString();
var dueDate = date._d.toISOString();
startDate = (startDate.substr(5,2)-1)+'/'+startDate.substr(8,2)+'/'+startDate.substr(0,4)+' '+parseInt(startDate.substr(11,2))+':'+startDate.substr(14,2);
dueDate = (dueDate.substr(5,2)-1)+'/'+dueDate.substr(8,2)+'/'+dueDate.substr(0,4)+' '+(parseInt(dueDate.substr(11,2))+1)+':'+dueDate.substr(14,2);
//using alert() in place of my function call
//to open the actual event creation page
alert(startDate+'\n'+endDate);
},
Any ideas of how to allow a multi date/time span and then how to capture the end date/time?
Related
I use the jquery datepicker in an Angular Application and I noticed a behavior that I would like to prevent.
The application consists of an input field for the date and a select box for a month selection.
If the months in the select box are changed, the minDate of the jquery date picker should be adjusted.
I tried the following example:
I set the date in the input field to the 24.04.2018
I chose October
The date of the input field is automatically set to 24.10.2018
I do not want the content of the Inputs field to be automatically adjusted.
Here is my git-hub project: https://github.com/annalen/jquery-datepicker
Many thanks for the help
Solution
I use the beforeShow and onClose date-picker functions
jQuery(yourElement).datepicker('option', 'beforeShow', function (date) {
return {
'minDate': yourMinDate,
'maxDate': yourMaxDate
};
});
jQuery(yourElement).datepicker('option', 'onClose', function (date) {
jQuery(this).datepicker('option', {
'minDate': null,
'maxDate': null
});
});
The datepicker updates the date only if the selected one is out of the range.
For example, if the current selected date is 24.04.2018 and you set the minDate to 20.04.2018, nothing will happen.
But if you set it to any date after 24.04.2018, it will get updated. I believe it's normal since its the purpose of setting a minDate.
You can always set yourself manually the input's value: $('#datepicker').val('20.04.2018') but I don't think it's a good idea to have something displayed different than the internal datepicker component state (the calendar that will popup will show a different date than the one in the input)
Regards,
Vincent
I'm having an issue with the FullCalendar jQuery Library, found HERE:
I'm attempting change up the normal functionality of things. When clicking the date number in month view instead of it switching to DAY view, I want it to go to another page and pass the date attribute int he data-goto attribute that is listed.
Each day, after the calendar is render has this markup:
<td class="fc-day-top fc-xxx fc-yyyy" data-date="YYYY-MM-DD">
<a class="fc-day-number" data-goto='{"date": "YYYY-MM-DD", "type":"day"}'>DD</a>
<td>
So after initializing the calendar, I have an on click event:
$('.fc-day-number').each(function(){
var $this = $(this);
$this.on('click', function(){
console.log($(this).data('goto', 'date'));
});
});
BUT, when I click on the number of the date, it gives me a Uncaught TypeError: Cannot read property 'charAt' of undefined
All I want to do, just to make sure it's collecting the proper data is just get the date value from the goto data-attribute. Once I have that then loading a new page is easy.
Thanks again in advance.
So I found a work around that, albeit doesn't serve 100% of the criteria, but still works all the same.
For the number in each cell, I applied a pointer-events: none, so that it would be non-clickable, and in the initialization code for FullCalendar, I took advantage of the dayClick method and used THAT to pass through the date, add that to a URL query and the simple javascript to redirect the page.
Here's the code:
$('#calendar').fullCalendar({
dayClick: function(date){
var dateFormat = date.format()
console.log("Clicked on: "+dateFormat); //returns the date
window.location.href = "newPage.jsp?datepicker="+dateFormat;
}
});
$('a.fc-day-number').each(function(){
var $this = $(this);
$this.css('pointer-events','none');
});
The jquery datepicker defaultdate will not automatically set to next available date when the graphical calendar is persistent on a page. the initial date the calendar selects can be a date that i have disabled. Many suggestions on workaround work when the calendar is a popup to an input field, but do not work when the calendar is persistently shown as a div. doesn't matter if the dates disabled are by noWeekends, by the day of week, or individually set days, the initial date value can be a disabled and unclickable date. I am using the alternate1 input field (which i normally hide) to pass data onto a PHP page. What i have almost works, but the next available date shows as highlighted when minDate happens to land on an available date, but when minDate lands on an unselectible date, the highlight is hidden. The temporary fix i used of setDate null - clears the initial selection value regardless of the highlight, so a visitor may think the a date is already selected when it is not. My PHP page reports back to the visitor that they have to go back and actually select a date. My use of datepicker is geared toward mobile, so popup or flyout calendar to make use of well known workarounds is unfavorable, the calendar GUI needs to be persistent on the page. To recreate my issue for yourself, on the jsfiddle, comment out the last javascript line, disallow a date mid-week in the var selections, and then set the minDate so that it will land on the disallowed date. you'll notice the alternate1 input gets prefilled with the disallowed date.
html code:
<div id="dp1"></div>
<input type="text" id="alternate1" name="alternate1"/> <!-- style="display:none;" this is the field that passes on to php -->
javascript code:
var selections = [
"2017-07-29",
"2017-07-30",
"2017-08-05",
"2017-08-06",
"2017-08-12",
"2017-08-13",
"2017-08-19",
"2017-08-20",
"2017-08-26",
"2017-08-27",
"2017-09-02",
"2017-09-03",
"2017-09-04",
"2017-09-09",
"2017-09-10",
"2017-09-16",
"2017-09-17",
"2017-09-23",
"2017-09-24",
"2017-09-30",
"2017-10-01",
"2017-10-07",
"2017-10-08",
"2017-10-09",
"2017-10-14",
]
function bansingle(date) {
var excerpt = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ selections.indexOf(excerpt) == -1 ]
}
// somehow combine this function later.
//function bandow(date) {
// var day = date.getDay();
// return [(day != 0 && day != 6)];
// }
$('#dp1').datepicker({
beforeShowDay: bansingle,
altField:'#alternate1',
altFormat: 'm-d-yy',
fielddateFormat: 'm-d-yy',
minDate: "+0d",
//maxDate: "+1m", // set latest selectable date
});
$('#dp1').datepicker("setDate", null); //clears alternate1 input field value
Here is the jsfiddle it does contain more dates and a little CSS. I recommend opening it in a new tab, to be able to return to this page after editing code.
the progress of my other question here has negated the need for an answer to this question. pursuing multiple changes to input, styling, and options - will workaround this question's problem.
I'm currently detecting double click events in month view. This works well:
dayRender: (date, element) => {
element.bind('dblclick', ...)
}
What I'm looking for is a way to do the same when the user is in day view or week view. I want to be able to detect a click event, and get the date and time they clicked on (note that time is relevant in day/week view, but not month view).
Any ideas?
For anyone that finds this in the future, here's the hacky solution I came up with:
Because fullcalendar doesn't render a <div> per time slot (eg. a single div representing 1pm-1:30pm on 1/2/2015), and instead visually represents a single time slot as the intersection of a row and a column, we need a way to figure out the time from a given click. Day info is already attached to each column (day) DOM element in the form of a data-date attribute. What I did was I forked fullcalendar, and added time info to each row (time slot) with a new data-time attribute.
Then, I listened on the double click event onViewRender, figured out the elements the user clicked on, and from those was able to derive both the date and the time slot:
viewRender: (view, element) ->
if view.type in ['agendaDay', 'agendaWeek']
element.on 'dblclick', (event) ->
els = document
.elementsFromPoint event.pageX, event.pageY
.filter (e) -> (e.hasAttribute 'data-date') or (e.hasAttribute 'data-time')
date = (_.find els, (e) -> e.hasAttribute 'data-date').getAttribute 'data-date'
time = (_.find els, (e) -> e.hasAttribute 'data-time').getAttribute 'data-time'
return unless date and time
startTime = moment "#{ date } #{ time }"
endTime = (moment startTime).add 30, 'minutes' # clone + increment
This is a really hacky solution, and mixes all sorts of concerns. However, until fullcalendar adds support for a timeClick event, this works pretty well.
Hope this helps someone else!
Explanation:
I am building a plugin for an application that uses thisa Bootstrap Datepicker plugin here http://www.eyecon.ro/bootstrap-datepicker/
So I am trying to utilize the same plugin for a Date Picker in my plugin for the app that already uses that Date Picker library.
My app is a Project Management app that shows Project Tasks in a popup Modal window. IN the Task Modal, there is a Due Date field.
I want to show the Due Date value for a Task when the Modal is opened. When a user clicks on the text for an existing Due Date field, I want to reveal and show an inline Date Picker Calendar. Just like the linked to library above!
So a user clicks on the Due date to reveal the date picker. They then click a date value which make an AJAX post to server and saves the new date value. It then should update the text that they originally clicked on with the new date value and then hide/close the date picker.
All pretty simple however I can use a little help please!
I have a Working JSFiddle Demo: http://jsfiddle.net/jasondavis/dd1bmrrc/
My custom code is all shown below as well. All that is missing is the Bootstrap Date Picker library, jQuery, MockAjax library, and CSS. It is all loaded on the JSFiddle linked above though.
You can also see some options on the Date Pickers project page here http://www.eyecon.ro/bootstrap-datepicker/
The Problem
On my demo page here http://jsfiddle.net/jasondavis/dd1bmrrc/ you will see that I have a span holding a Date value.
Next to it is a text input which when clicked on shows the Date Picker Calendar.
After selecting a Date, my span is updated and Date Picker is hidden.
Clicking my span again shows the Date picker text box.
You then have to click the text box as well to see the Date Picker Calendar.
So my goal is to not have the Text Box. The Span value should open and close the Datepicker, without a textbox needing to exist!
Is this even possible?
The Code
HTML:
<span id="due-date-span">1/1/2015</span>
<input type="text" class="span2" value="02-16-2012" id="task-due-date-cal">
JavaScript for Date Picker:
$(function(){
// Show Date Picker Calaendar when "Due Date" SPAN text is clicked on:
$('#due-date-span').on('click', function(){
$('#task-due-date-cal').show();
});
// Instantiate and run Date Picker Calendar plugin
var dueDatePicker = $('#task-due-date-cal').datepicker({
format: 'mm-dd-yyyy',
// When Date Picker Date is clicked on to change a Date value:
}).on('changeDate', function(ev){
dueDate = new Date(ev.date);
// Make AJAX POST to save Due Date value to the server and update DOM.
$.ajax
({
type: "post",
url: "updateDueDate",
data: "date="+dueDate,
success: function(result)
{
// UPDATE SPAN #due-date-span with new Date value
$('#due-date-span').text(dueDate);
// Close/Hide Date Picker, until it is clicked to show again
$('#task-due-date-cal').hide();
$('#task-due-date-cal').datepicker('hide');
}
});
});
});
Mock AJAX request for Demo:
// Mock AJAX response for AJAX request to /updateDueDate to Update In-line Task Due Date Fields
$.mockjax({
url: '/updateDueDate',
responseTime: 900, // simulate lag
response: function(settings) {
//console.log(settings.data);
console.log('info', 'UPDATE TASK FIELD AJAX REQUEST SENT', settings.data);
if(settings.data.value == 'err') {
this.status = 500;
this.responseText = 'Validation error!';
} else {
this.responseText = '';
}
}
});
One way is to leave the input, lay it over top of the span but with css that makes it invisible to user. The events are still triggered on the input
#task-due-date-cal, #task-due-date-cal:focus{
position:absolute;
z-index:10000;
left:0;
top:0;
background:none;
font-size:0;
border:none;
margin:0;
box-shadow:none;
}
I used an extra wrapper with position relative around the input and span
DEMO