I have two calendars and I would like to use them without displaying the last days of the previous month.
How can I get rid of the extra row? I looked into Datepicker's API, but I couldn't find anything that works.
You can get a better view of the probleme here:
I need them to have the same height.
Hiding last days from previous month or next month would not make the height same for these calendars, you need to do some css trick for this.
But if you really need to hide these you can try skipping the events in the eventRender() method:
eventRender: function(event, element, view)
{
if(event.start.getMonth() !== view.start.getMonth()) { return false; }
}
Related
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 already have start and end time for an external event but is there any correct way to set the end time on highlight (gray background) of the same external event.
Or if there is no way to set the end time on highlight then can we remove the fc-highlight completely from external/draggable events.
By the way, I already asked this question but didn't get correct response, so that's why I'm asking again
For more detail, please visit my another question here: Disable highlight of an external event in fullcalendar
Starting from your CodePen...
I managed to customise the draggable event in order to have a defined duration to be used as time calculation.
I added data-duration-hour and data-duration-minute attributes to the draggable event.
Those "data" attributes ares used to determine the ending time of the event, on drop.
NOW about the hightlight which occurs on drag (before drop) in the calendar...
It still hightlights 2 hours.
You'll have to to look at a function to add on drag in fullCalendar options.
I have no idea for the moment.
So... I may not have answered the right question (about the hightlight effect on drag).
But this is still an improvement for your project.
See in this CodePen
HTML modified:
<div class='fc-event' data-duration-hour="3" data-duration-minute="30">My Event 1</div>
JS modified:
function external_event_dropped(date, external_event) {
var event_object;
var copied_event_object;
var tempDate = new Date(date);
event_object = $(external_event).data('eventObject');
copied_event_object = $.extend({}, event_object);
copied_event_object.start = date;
// This is the dropped date object
console.log(date);
// This is the drop time in clear.
console.log( "dropped at: "+date.hour()+":"+date.minute() );
// Retreive the data-duration from the dragged element.
var durationHour = parseInt(external_event.data("duration-hour"));
var durationMinute = parseInt(external_event.data("duration-minute"));
console.log("DATA: "+durationHour+":"+durationMinute);
// Clone the time object to modify it in order to create de end time.
var dateEnd = date.clone();
dateEnd = dateEnd.hour(dateEnd.hour()+durationHour);
dateEnd = dateEnd.minute(dateEnd.minute()+durationMinute);
// This is the end time object.
console.log(dateEnd);
// This is the drop end time in clear.
console.log( "dropped at: "+dateEnd.hour()+":"+dateEnd.minute() );
// Now set it to the FullCalendar object.
copied_event_object.end = dateEnd;
copied_event_object.allDay = false;
copied_event_object.title = 'ADEEL';
external_event.remove();
$('#exampleCalendar').fullCalendar('renderEvent', copied_event_object, true);
}
For the complete solution check this out: Fullcalendar
External/Draggable Events Highlight
Effect
Well after reading the fullcalendar documentation and spent a lot of time on this issue, I come up with a solution and I hope it might help others as well.
So, the solution is:
I've added an option defaultTimedEventDuration which is a default duration of an external/draggable event, if there is no duration set on event.
e.g: defaultTimedEventDuration: '01:00:00'
Also added data-duration in html to get dynamic duration and highlighted effect.
e.g: <div class='fc-event' data-duration='03:00'>My Event 1</div>
N.B: Also possibility to set duration attribute in js data
I am creating the calendar where I can drop events from external list.
I took as example this sample - external-dragging.
I want to add specific logic that user can add only one event per day.
So for preventing dropping to 'filled' cell I am trying to use dropAccept method in the next way.
dropAccept: function (item) {
return [my condition];
},
I can get item that I am dropping from item element, I can get calendar's events but I can't get a cell (or a date) where I am putting my item.
How could I get a cell/date where I am dropping item?
Thank you.
I have solved this in another way.
I set all events as all day by default
I forbade an event overlapping
My code is:
$('#calendar').fullCalendar({
allDayDefault: true,
eventOverlap: false,
});
You can use drop function of full calendar.
Here is parameters
function( date, jsEvent, ui ) { }
Enjoy!
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!
I need to customize each month in ui datepicker. This means that for each month will show a different background image. I think to do the next:
<div class="calendar-container CURRENT-MONTS-CLASS"><div id="datepicker"></div></div>
How can I get current month name and add it as a class to datepicker's container?
Greatly appreciate any help!
You can use the month number, e.g. .month1 - .month12 or .monthJanuary - .monthDecember (or some other format) for this...personally I'd stick with numbers for other cultures, but you can adapt this answer for both ways. Use the onChangeMonthYear event of the datepicker like this:
$('#datepicker').datepicker({
onChangeMonthYear: function(year, month, inst) {
//Month number (1-12) is month
//Month name you can get by $("#datepicker .ui-datepicker-month").text()
$(this).closest("div.calendar-container")
.removeClass().addClass("calendar-container month" + month);
}
});
And set it initially when the page loads (after creating the datepicker), since I'm using the month number in the above, it would look like this:
$("div.calendar-container").addClass("month" + ($('#datepicker').datepicker("getDate").getMonth()+1));
If you were using names instead, use:
$("div.calendar-container").addClass("month" + $("#datepicker .ui-datepicker-month").text());
Whichever option you go with, just create the 12 classes with the background images/styling you want. You can test it out here. If you wanted the background to actually be on the datepicker itself, not that .calendar-container <div> you'd just add that to the CSS selector to make it more specific, for example:
.month1 .ui-datepicker-inline { background: url(January.jpg); }
You can test out that version here.