I am using FullCalendar v2 now and I found it is quite useful. However, I have encountered a problem when I want to show the end time of an event.
I want to show both start time and end time within a day in week and daily view like "09:00-17:00". I have found a solution in Display ending time in fullcalendar week view only but it seems a v1 version. I use this in v2 and failed.
How can I show both start time and end time within a day?
I found that this answer worked for me: https://stackoverflow.com/a/24951989/590382
In FullCalendar >= 2.0.1, there is a setting called displayEventEnd.
Documentation: http://fullcalendar.io/docs/text/displayEventEnd/
Whether or not to display an event's end time text when it is
rendered on the calendar.
Example:
displayEventEnd: {
month: false,
basicWeek: true,
"default": true
}
The answer here: Fullcalendar event's end time is missing works for version 1.6.1. However, the formatDates function has been replaced by formatRange in v2. So, use
eventAfterRender: function(event, $el, view) {
var formattedTime = $.fullCalendar.formatRange(event.start, event.end, "HH:mm");
// If FullCalendar has removed the title div, then add the title to the time div like FullCalendar would do
if($el.find(".fc-event-title").length === 0) {
$el.find(".fc-event-time").text(formattedTime + " - " + event.title);
}
else {
$el.find(".fc-event-time").text(formattedTime);
}
}
No need for such a convuluted answer as the one above.
I had the same issue and I fixed it by simply configure the fullcalendar properties as so:
timeFormat: {
month: "HH:mm",
week: "HH:mm",
day: "HH:mm"
},
Related
I am using vuejs-datepicker and I set datepicker (calendar) to today date by default like this:
<datepicker v-model="theDate" format="yyyy-MM-dd"></datepicker>
<!--shows yesterday date in calendar instead of today. "format" needed to get right format.-->
...
data() {
return {
myDate: null
}
},
...
created() {
this.myDate = this.$moment().format("YYYY-MM-DD")
console.log(this.myDate) //gives me today date in right format but no shows the same
}
...
This must be very basic and simple thing. But I don't really get why it is showing yesterday date and how to fix it.
Update: this describes my issue: https://github.com/charliekassel/vuejs-datepicker/issues/23
Finally, I found one solution here https://github.com/charliekassel/vuejs-datepicker/issues/158.
I'm using FullCalendar library with Vue.js
Is it possible to use the default prev, next and today buttons that are default to trigger my own actions.
I have created my customs buttons that do what I want, but prefer to use the default buttons.
Current I have a button linked to a method:
<button #click="handleMonthIncrement">Next Month</button>
And this calls this method:
handleMonthIncrement: function(arg) {
// update month and year
this.incrementMonth();
// update calendar
let calendarApi = this.$refs.fullCalendar.getApi();
calendarApi.next();
// updateCurrentSummary (mapped to store)
this.updateCurrentSummary();
}
I'm using the ref=fullCalendar which ties into the jQuery reference of the Calendar to change the view.
If I could listen to the next, prev buttons then I could remove that code as the buttons already change the calendar view.
Is this possible? I'm aware that viewRender (https://fullcalendar.io/docs/v1/viewRender) can be used to note when the calendar has changed view, but am not sure if this is something that can be used for my requirements above.
Thanks in advance.
Thanks
I achieved this by looking up the Events Emitted here: https://github.com/fullcalendar/fullcalendar-vue/blob/master/src/fullcalendar-options.js
And I found datesRender - which can be added to the FullCalendar element prefaced by # to trigger when the dates re-render. Because I have this on month only view I can then trigger a method which I called handleMonthChange.
See here:
<FullCalendar
defaultView="dayGridMonth"
#datesRender="handleMonthChange"
/>
Then within handleMonthChange I had the following:
handleMonthChange: function(arg) {
var currentStart = arg.view.currentStart;
var check = moment(currentStart, "YYYY/MM/DD");
var currentMonth = check.format("M");
// load action
this.updateCurrentMonth(currentMonth);
// refresh summaries
this.updateSummary();
}
I used moment to determine the month from the date (from the view object.
See more info here on what is passed back here https://fullcalendar.io/docs/datesRender
I then used this to change the month in my Vuex state by calling a Vuex action, then I updated my summary section as required.
Hope that helps someone else too. Big thanks to #ADyson for helping me get here!
I need a bootstrap datepicker where the start date and enddate must be customizable like start date is 01-01-1950 and end date is todate-18 years. Secondly wanted to show the dropdown year and month on the calendar topbar to use easily rather than the default bootstrap calendar.
For your reference have attached an image which 'm using now without bootstrap.
Any idea/link is appreciated.
you can not put dropdown but can achieve same functionality by another way with new bootstrap version.
check out this link http://www.malot.fr/bootstrap-datetimepicker/
<script>
$(document).ready(function() {
$('#date_deb').daterangepicker({locale: {format: 'DD/MM/YYYY'},
showDropdowns: true,
minDate: '01/01/2016',
singleDatePicker: true,
singleClasses: "picker_2"
}, function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});
});
</script>
I have a problem with sencha touch datepicker field. I want to set default (current date) in datepicker field but I am not able to find a way to do that. I am using sencha architect and there is no property exist to set default date in datepickerfield.
I am using the following code in value property of datepickerfield:
{
year: (new Date()).getFullYear(),
day: 1,
month: 5
}
But application stop working when using above code to display date.
Please tell me how to achieve this.
Checkout the 'value' property
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.picker.Date-cfg-value
You'll want to add an initialize function to whatever class contains your datepicker.
Select that class.
Then add an initialize function from the config
panel.
Then add the following code to the initialize function:
var picker = this.down('datepicker');
picker.setConfig({
value: new Date()
});
this.callParent();
Of course if you have multiple datepickers you'll want to give it an item id and use this.down('#thedatepicker');
This can be done in the config of the container itself as follows:
xtype: 'datepickerfield',
value: new Date(),
picker: {
yearFrom: 2015,
yearTo: 2030
}
Relatively new to Jquery and Rails 3. I have implemented full calendar into my site and all works ok apart from actually updating my Events model via the full calendar interface. From what iunderstand I should be able to drag and drop a calendar entry to another day and it will update the Events model and leave the appointment in its new day upon a refresh. This however does not happen. has anyone had similar issues with this? the code for this action looks like this
function updateEvent(the_event) {
$.update(
"/events/" + the_event.id,
{ event: { title: the_event.title,
starts_at: "" + the_event.start,
ends_at: "" + the_event.end,
description: the_event.description
}
},
function (reponse) { alert('successfully updated task.'); }
);
};
Am I missing something obvious?
I had a problem with editing events in the fullCalendar plugin. In my case it had to do with the parameters editable and disableResizing. You have to implement the eventDrop handler for the drag and drop functionality. The parameters dayDelta, minuteDelta, allDay contain the time difference between old and new date:
$('#calendar').fullCalendar({
...
editable: true,
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
$.ajax({
type:"PUT",
url: "/events/"+event.id,
data: "minute_delta="+minuteDelta+"&day_delta="+dayDelta,
..
});
}
});