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
Related
I am creating a fullcalendar which retrieves the events by mean of a function call set in the events property.
This is the fullcalendar definition (which is created when a modal dialog box is shown):
var calendarCreated = false;
$('#modal_calendar').on('shown.bs.modal', function () {
$(this).find('.card-header').draggable();
if (!calendarCreated) {
$('[data-toggle="calendar"]').fullCalendar({
themeSystem: 'bootstrap4',
locale: 'es',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
header: {
left: 'title',
center: '',
right: 'prev,next today'
},
buttonText: {
today: 'Hoy',
month: 'Mes',
week: 'Semana',
day: 'Día'
},
events: '/myurl',
eventRender: function (eventObj, $el) {
$el.popover({
title: 'Menú ' + eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
});
calendarCreated = true;
}
});
The returned JSON object contains event names correctly, for example,
Note the title values. Well, this is how the calendar actually appears (event start date is 28th April at 00:00):
Note the 4a text that is added before the event name. Why is that and how can I get rid of it?
That text before the event title is the event's time formatted according to the plugin configuration.
By default it has values for each locale. In your code you specify 'es'. The '4a' is the representation of 4 am.
The timeFormat option lets you modify this. For example,
timeFormat: 'H:mm'
Changes the am/pm format to a 24 hour display format and always show the minutes part.
Please see the timeFormat option docs for more details.
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.
I'm actually trying to use the calendar-bundle from adesigns(adesigns/calendar-bundle": "1.2-beta"), and to translate it, but it seems like it doesn't translate.
$('#calendar-holder').fullCalendar({
header: {
left: 'prev, next',
center: 'title',
right: 'month, basicWeek, basicDay,'
},
lazyFetching: true,
timeFormat: {
// for agendaWeek and agendaDay
agenda: 'h:mmt', // 5:00 - 6:30
// for all other views
'': 'h:mmt' // 7p
},
//Set to True to show Calendar Week in seperate Row/Field of Calendar View
weekNumbers: false,
//Set to your Language to change the text, the first day of week etc according to your settings.
lang: 'fr',
So my calendar should be in french, but i'm still getting my months/days in english.
Is there someone who already did it ?
Maybe this is not the best solution, i think that the bundle only accept 'en' because the code has been harcoded.
I recommend to you to pick up the file bundles/adesignscalendar/js/fullcalendar/jquery.fullcalendar.min.js, make a copy in your bundle, include this new file instead the other, an make all translations you need.
Also you just can add, like the parameter 'lang: es', each translation, i.e.
$('#calendar-holder').fullCalendar({
...
dayNamesShort : [ 'Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab' ],
...
buttonText : { prev : ' ◄ ', next : ' ► ',
prevYear : ' << ', nextYear : ' >> ',
today : 'hoy', month : 'mes', week : 'semana', day : 'dia' },
...
});
I hope this can help someone.
I am facing problem while adding two agendaWeekView in a single calendar. Please have a look the calendar config.
header:{
left: 'prev,next',
center: 'title',
right: 'agendaWeek agendaWeek'
},
here I am calling agendaWeek two times, It appears two tab in the calendar called "Week" but when I clicked anyone of them both views are activated and I am also not able to change the text of the week tabs. So please give some suggestion for it.
From the looks of it, you are not closing the right header variable with a quotation.
Maybe this will work.
header:{
left: 'prev,next',
center: 'title',
right: 'agendaWeek agendaWeek'
},
Not sure though. If you could post a plunker of fiddle then we could diagnose with ease.
Now we can duplicate views or create own custom views in the single calenndar. Here is the solution.
We need to change in the fullcalendar.js file.
Firstly add your custom view name, according to my question I wanted to duplicate agendaView so that's why my view name will be "duplicateAgendaWeek". Set the name into defaults.
buttonText: {
prev: "<span class='fc-text-arrow'>‹</span>",
next: "<span class='fc-text-arrow'>›</span>",
prevYear: "<span class='fc-text-arrow'>«</span>",
nextYear: "<span class='fc-text-arrow'>»</span>",
today: 'today',
month: 'month',
week: 'Weekly',
day: 'Daily',
duplicateAgendaWeek: 'Duplicate Week' // here is the name of my view.
},
Now duplicate the existing agendaWeek function with your view name.
fcViews.duplicateAgendaWeek= DuplicateAgendaWeekView;
function DuplicateAgendaWeekView(element, calendar) {
var t = this;
// exports
t.render = render;
// imports
AgendaView.call(t, element, calendar, 'duplicateAgendaWeek');
var opt = t.opt;
var renderAgenda = t.renderAgenda;
var formatDates = calendar.formatDates;
function render(date, delta) {
if (delta) {
addDays(date, delta * 7);
}
var start = addDays(cloneDate(date), -((date.getDay() - opt('firstDay') + 7) % 7));
var end = addDays(cloneDate(start), 7);
var visStart = cloneDate(start);
var visEnd = cloneDate(end);
var weekends = opt('weekends');
if (!weekends) {
skipWeekend(visStart);
skipWeekend(visEnd, -1, true);
}
t.title = formatDates(
visStart,
addDays(cloneDate(visEnd), -1),
opt('titleFormat')
);
t.start = start;
t.end = end;
t.visStart = visStart;
t.visEnd = visEnd;
renderAgenda(weekends ? 7 : 5);
}
}
;;
Now the last one need to set formats for our custom views.
// time formats
titleFormat: {
month: 'MMMM yyyy',
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
duplicateAgendaWeek: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // set your view format here
day: 'dddd, MMM d, yyyy'
},
columnFormat: {
month: 'ddd',
week: 'ddd M/d',
duplicateAgendaWeek: 'ddd M/d',// set your view format here
day: 'dddd M/d'
},
Now just call the view name from your controller.
header:{
left: 'prev,next',
center: 'title',
right: 'agendaDay agendaWeek duplicateAgendaWeek',
},
I'm using jQuery fullCalendar. A client wants to see only their bussiness opening hours in the calendar. Is that possible? How?
Example: a bussiness opens from 9am to 1pm and from 3pm to 10pm
The minTime and maxTime options will let you set the first and last hour. I don't think you can have a calendar with a break in the middel though.
Maybe you could create a recurring event called lunch and color it differently to your actual events
On current fullcallendar version (5.x), maxTime and minTime options where renamed to slotMaxTime and slotMinTime.
To hide most business time - i.e., night and/or non-working days:
Calculate some values right from your businessHours specification
const workSpec = [
{
daysOfWeek: [1, 2, 3, 4],
startTime: '08:00',
endTime: '18:00'
}
{
daysOfWeek: [5],
startTime: '09:00',
endTime: '14:00'
}
]
/*
* calculate the following:
* - minimum "opening time"
* - maximum "opening time"
* - working days
* - non-working days
*/
const workMin = workSpec.map(item => item.startTime).sort().shift()
const workMax = workSpec.map(item => item.endTime).sort().pop()
const workDays = [...new Set(workSpec.flatMap(item => item.daysOfWeek))]
const hideDays = [...Array(7).keys()].filter(day => !workDays.includes(day))
Use calculated values on the related properties - i.e. for #fullcalendar/react:
<FullCalendar
//...
businessHours={workSpec}
slotMinTime={workMin}
slotMaxTime={workMax}
hiddenDays={hideDays}
//...
/>
Disclaimer: this was a quick-n-dirty go. There may be refactors to improve performance
there has been an update on fullcalendar that allows you to apply business hours
http://fullcalendar.io/docs/display/businessHours/
however, i don't think it ll allow you to impement a break within the day..
over here
Apply different timeslots and ranges for each day on Fullcalendar
you ll find my approach on a similar issue that i used Javascript to prevent selection of specific period and also with css i highlighted the areas that i didn't want to be able to be selected..
To completely hide the desired row (NON business/break hour) you have to modify the following method inside fullcalendar.js:
// Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
renderSlatRowHtml: function() {...}
and then avoid entering the while clause that adds the html code:
while (slotTime < this.maxTime) {...}
you can add an if clause up inside that while, or even more work out to enter a config param to check inside that while iteration.
hiding the break period is still not possibleas far as i know,
but version 2 has now to peoperties minTime and maxTime which you can use to hide non-business hours.
Documentation here: http://fullcalendar.io/docs/agenda/minTime/
Use selectConstraint and eventConstraint options to prevent click event in non business hours (from full calendar 2.2version). in my case i used selectConstraint: "businessHours" https://fullcalendar.io/docs/selection/selectConstraint/ https://fullcalendar.io/docs/event_ui/eventConstraint/
For anyone trying this.
This one is to remove the non business
<style>
.fc .fc-non-business {
background: var(--fc-non-business-color);
display: none;
}
</style>
This one is for the business hours to remove those time that you want to disable
selectConstraint: 'businessHours',
businessHours: {
daysOfWeek: [ 1, 2, 3, 4,5,6], // Monday - Thursday
startTime: '07:00', // a start time (10am in this example)
endTime: '20:00', // an end time (6pm in this example)
}
Use Content height to adjust the calendar height
contentHeight: 680,
This is the whole configuration for the calendar
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
hiddenDays: [0],
allDaySlot: false,
selectOverlap:false,
selectable: true,
selectConstraint: 'businessHours',
businessHours: {
daysOfWeek: [ 1, 2, 3, 4,5,6], // Monday - Thursday
startTime: '07:00', // a start time (10am in this example)
endTime: '20:00', // an end time (6pm in this example)
},
select: function(data) {
var start = formatDateToTime(data.start);
var end = formatDateToTime(data.end);
var date = data.startStr.substring(0, 10);
var uid = "add";
$.ajax({
type: "POST",
url: "{{ url('event/getModal')}}",
data: {
uid: uid,
start: start,
end: end,
date: date
},
success: function(response) {
$("#modal-view").modal('toggle');
$("#modal-view").find(".modal-title").text("Add Event");
$("#modal-view").find("#modal-display").html(response);
}
});
},
headerToolbar:{
start: '', // will normally be on the left. if RTL, will be on the right
center: '',
end: '' // will normally be on the right. if RTL, will be on the left
},
dayHeaderFormat:{ weekday: 'long' },
editable: true,
events: <?php echo $Events?>,
contentHeight: 680,
eventClick: function(calEvent, jsEvent, view) {
console.log(calEvent);
},
viewDidMount: function(event, element) {
$('td[data-time]').each(function() {
var time = $(this).attr("data-time");
if(time < "07:00:00"){
$(this).parent().remove();
}
if(time > "19:30:00"){
$(this).parent().remove();
}
console.log($(this).parent());
});
},
eventDidMount: function(event, element) {
// To append if is assessment
if(event.event.extendedProps.description != '' && typeof event.event.extendedProps.description !== "undefined")
{
$(event.el).find(".fc-event-title").append("<br/><b>"+event.event.extendedProps.description+"</b>");
$(event.el).find(".fc-event-title").append("<br/><b>"+event.event.extendedProps.prof+"</b>");
}
}
});
calendar.render();
Sample Output
Check this