Now my callendar week is like this: Friday dd/mm. I'd like to know if there is a way to hide the day/month number and only shows the name of the day.
Couldn't find anything Here
My code so far:
<script type="text/javascript">
$(document).ready(function(){
//Page is now ready, initialize calenda.
$('#calendario').fullCalendar({
header: {
center: 'title',
left: '',
right: ''
},
defaultView: 'agendaWeek',
firstDay: 1,
weekends: false,
events: [
{
title: 'Event1',
start: '2016-03-14',
end:'2016-03-14T04:00'
}
],
})
});
</script>
And this is what I'd like to change
You need to set the week view columnFormat
Paste the code below under the line where you set the default view " defaultView: 'agendaWeek', "
views: {
week: {
columnFormat: 'ddd'
}
},
The ddd shows Sat, Sun etc if you change it to dddd it will show Saturday , Sunday etc.
But of course you can set it to what ever you like it to show.
Related
I'm currently trying to make a Year calendar only.
I've disabled the navigation between days and months and removed the header (with the buttons).
BUT, on the year display, months are links. When you click on it, that changes the type of the calendar display (year display => month display).
In my case, because I disabled the header, if someone clicks on that month link they can't go back to the year view...so the calendar becomes unusable.
Does someone know how to disable that "month link"?
$('#calendarRoomUnavailable').fullCalendar({
height: 'auto',
header: {
left : '',
center: 'title',
right: ''
},
defaultView: 'year',
defaultDate: currentDayStart,
lang: 'fr',
firstDay: 1,
columnFormat: 'ddd D/M',
weekends: false,
navLinks : false,
events: basePath + '/agenda/datalist/room_available',
viewRender: function (view, element) {
$(element).find('tbody td').css('cursor', 'pointer');
currentDayStart = view['start'];
currentViewType = view['type'];
},
dayClick: function (date, jsEvent, view) {
[...]
},
eventClick: function (calEvent, jsEvent, view) {
[...]
},
});
Code behind the month link.
<div class="fc-year-monthly-name fc-first">
<a name="201801" data-year="2018" data-month="0" href="#">Janvier</a>
</div>
Thanks
Exemple with the 'month link'
I'm using FC 2.0 and was searching for an option to localize 'AM' 'PM' text on the axis, which is being set with the option:
axisFormat: 'h(:mm) A',
is there a way to overwrite these values like we do for monthNames, dayNames etc?
Thanks in advance!
Edit:
This is how I'm localizing some other elements of full calendar:
('#calendar-wrapper').fullCalendar({
header: {
left: 'agendaDay,agendaWeek,month, today',
center: 'prev,title,next',
right: 'publish_info'
},
titleFormat: {
month: 'MMM YYYY',
agendaDay: 'dddd, MMM D YYYY',
agendaWeek: 'MMM D, YYYY',
},
columnFormat: {
week: 'ddd D'
},
axisFormat: 'h(:mm) A',
buttonText: {
day: I18n.t('day_button'),
week: I18n.t('week_button'),
month: I18n.t('month_button'),
today: I18n.t('today')
},
lang: I18n.locale,
monthNames: I18n.t('date.month_names'),
monthNamesShort: I18n.t('date.abbr_month_names'),
dayNames: I18n.t('date.day_names'),
dayNamesShort: I18n.t('date.abbr_day_names'),
...
// rest of the code..
The I18n.t('day_button') will contain the day text for selected language.
Likewise I'd like to set something like I18n.t('am') and I18n.t('pm') to show the localized AM PM text on the axis.
Thanks
I needed to override moments i18n meridiem function.
moment.lang(I18n.locale, {
meridiem : function (hours, minutes, isLower) {
return hours < 12 ? I18n.t('date.am') : I18n.t('date.pm');
}
});
// I18n.locale is the current user's local
// and specified calendar locale to
// lang: I18n.locale
// date.pm, date.pm are placed in rails yaml files and will be loaded for selected language
Thanks
I'm using the jQuery FullCalendar plugin and want to hide certain hours in day view.
I want to show the calendar from 6am to 10am and from 12pm to 4pm.
I already set minTime: '6:00' and maxTime: '14:00' but I also need to hide the hours between 10am to 12pm too.
The problem is, fullcalendar relies on Moment.js durations. As far as I can tell, you can't have a duration that is multiple durations.
However, it seems that fullcalendar renders the agenda first, then calculates the position of where the events need to be after the agenda is laid out. So, if a CSS solution is acceptable, you could always do the following:
[data-time^="10"]>td, [data-time^="11"]>td, [data-time^="12"]>td
{
height: 0 !important;
border: 0 !important;
}
This works by matching the table row's "data-time" attribute. The match pattern is a prefix match, to save some typing. If you don't want to use ^= to match the prefix, you can try these:
https://www.w3.org/TR/css3-selectors/#selectors
Edit to demonstrate (works on Chrome 52). As you can see, I also needed to make the children of the affected cells hidden (display: none;). Also note that you'll need to filter your own data to exclude or alter dates times that fall in that range. I've included some events that show what happens if you don't take this precaution.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay'
},
defaultView: 'agendaDay',
defaultDate: '2016-06-12',
editable: true,
eventLimit: true,
events: [
{
title: 'Meeting',
start: '2016-06-12T10:30:00',
end: '2016-06-12T12:30:00'
},
{
title: 'Loooong Meeting',
start: '2016-06-12T09:30:00',
end: '2016-06-12T14:30:00'
},
{
title: 'Lunch',
start: '2016-06-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-06-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-06-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-06-12T20:00:00'
}
]
});
})
[data-time^="10"]>td,
[data-time^="11"]>td,
[data-time^="12"]>td
{
height: 0 !important;
border: 0 !important;
}
[data-time^="10"]>td *,
[data-time^="11"]>td *,
[data-time^="12"]>td *
{
display: none !important;
}
<link href="http://fullcalendar.io/js/fullcalendar-2.9.1/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.9.1/fullcalendar.min.js"></script>
<div id="calendar"></div>
if i try to add the event entry for after 10pm, its replicates in another day also.
ex: Adding entry for 2015-08-10T22:15:00(Monday), it replicates in another day(Tuesday) at 12am also.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek'
},
defaultView: 'agendaWeek',
defaultDate: '2015-08-10',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-08-10T21:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-08-10T23:15:00'
}
]
});
});
I cant edit it. But the reason is that the event is showing the correct duration and hence stretching beyond 12 am on Tuesday. For example if the event is for 2 hours duration and you set the start time as 22:15 pm on Monday, the end time would be 00:15 on Tuesday (which is 12:15 am on Tuesday). I can't edit a thing but can drag and reschedule it for Monday.
I have moved it to start at 10:45 and end at 11:45 and its not duplicating over to Tuesday
I want to ensure the events displayed in the 'month view' is accordance to the event start and end date. However, I notice due to the default business hours set in fullCalendar (9am to 5pm), I am having problem to display the events in the 'month view'
Problem :
For example, given two events (Non all day event) as configured below:
Event A >>
Start Date : 7 March | Start Time : 2pm
End Date : 9 March | End Time : 09:30am
Event B >>
Start Date : 7 March | Start Time : 2pm
End Date : 9 March | End Time : 08:30am
In the 'month view' for March
Event A is displayed across 7, 8 and 9 March while
Event B is only displayed across 7 and 8 March
Question:
How can i set the business hours in full calendar from 0000 to 2359 so that I can override the default business hours from 0900 to 1700
I have tried the method as suggested in the fullCalendar documentation
http://fullcalendar.io/docs/display/businessHours/
$(#calendarId).fullCalendar(
{
theme: true,
header:
{
left: 'prev,today,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
eventColor: '#3485c1',
height: 800,
aspectRatio: 0.5,
editable: true,
selectable: true,
events: arrayOfEventObj,
eventLimit: true,
timeFormat: '',
businessHours:
{
start: '00:00',
end: '23:59',
dow: [ 1, 2, 3, 4, 5, 6, 7 ]
}
}
However, I am still unable to emphasized the new businessHours. Is there a property that I need to set true in order to emphasized the new businessHours?
Or am I totally doing it wrongly ?
Please advice. Thank you
Business Hours shouldn't effect the month view and by default are off. You can leave the setting out or set it to false like this businessHours: false
For your agenda views that do show time, you can effect what's shown by setting minTime and maxTime.
I think it's a bug, i try with last version and doesn't work, i try with this js and work
http://eo14.com/static/fullcalendar/fullcalendar.js
a work example here
http://eo14.com/static/fullcalendar/
Personally i try with this code and work:
<script>
var calendar="";
var _eventi="";
_eventi = [{events: <?PHP echo json_encode($orariServizio); ?>}];
$(document).ready(function() {
calendar = $('#calendar').fullCalendar({
//eventSources: _eventi,
defaultDate: "2015-06-01",
lang:"it",
//defaultTimedEventDuration: '04:00:00',
height: 500,
allDaySlot:false,
header: {
left:'',
//center:'',
right:'',
//left: 'prev,next today',
center: 'title',
//right: 'month,basicWeek,basicDay'
}, // buttons for switching between views
//weekmode:"liquid",
editable: true,
selectable: true,
selectHelper: true,
//eventLimit: true,
selectConstraint: 'businessHours',
eventConstraint: 'businessHours',
views: {
settimana:{
type:'agendaWeek',
duration: { days: 7 },
titleFormat: ' ', //YYYY
//buttonText: '7 day',
columnFormat: 'dddd',
//hiddenDays: [0, 6] // Hide Sunday and Saturday?
}
},
defaultView: 'settimana',
businessHours:[
{
start: '09:00',
end: '13:00',
dow: [1, 2]
},
{
start: '14:00',
end: '16:00',
dow: [1, 2]
},
{
start: '10:00',
end: '19:00',
dow: [4]
},
{
start: '06:00',
end: '10:30',
dow: [6]
},
{
start: '13:00',
end: '17:00',
dow: [6]
},
{
start: '20:00',
end: '23:00',
dow: [6]
}
]
});
});