I'm updating the buttonText for 'today' in views and its not working.
Updating the buttonText for the other buttons works fine.
fullcalendar: {
firstHour: 9,
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,month,listMonth,'
},
slotMinutes: 30,
theme:false,
views: {
today: {buttonText: 'Today'},
listWeek: {buttonText: 'Week'},
listDay: {buttonText: 'Day'},
listMonth: {buttonText: 'List'},
month: {buttonText: 'Month'}
},
defaultView: 'month'
},
'today' should be capitalized but its not...
Here's demo using your code: http://jsfiddle.net/ocvpsLgt/ . The "today" button you're seeing is the one defined in the left area of the header settings. It's a standard navigation button defined by fullCalendar which changes the date to the current today. It has nothing to do with the custom view you tried to define which you named as today.
You can't define a view which has the same name as a standard navigation button - if you put that name into the header, fullCalendar will just think you are referring to the standard button, and display that. In any case, it makes no sense to define a view called "Today" - a view describes the layout of the calendar, not a particular date. Today's date can be reached from any type of view. You've already got "listDay" which will cover a single day - any day, including today. I can't see why you'd want another day view, unless it was a different type, such as "agendaDay".
If you just want to capitalise the name of the standard "today" button, then that can be done via the global buttonText setting:
buttonText: { today: "Today" }
Demo: http://jsfiddle.net/ocvpsLgt/1/
Heres for lists as well
buttonText :
{
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
listMonth: 'List Month',
listYear: 'List Year',
listWeek: 'List Week,
listDay: 'List Day'
}
here->https://fullcalendar.io/docs/buttonText
Related
I am upgrading fullcalendar-scheduler 1.9.4 to v5 beta2.
I found that the behaviour of slotLabelInterval has been changed from v3 to v4.
My objective : I want to totally remove the slot label row. My setting in V1.9.4 is like below (It works) :
...
weekNumbers: true,
views: {
timelineThreeDays: {
type: 'timeline',
duration: { days: 3 },
slotLabelInterval: '24:00:00'
}
},
...
But the setting "slotLabelInterval: '24:00:00'" don't do the same thing in resourceTimeline type with Fullcalendar-Scheduler 5 beta2 (same as v4)
...
weekNumbers: true,
views: {
timelineThreeDays: {
type: 'resourceTimeline',
duration: { days: 3 },
slotLabelInterval: '24:00:00'
}
},
...
The screenshot for the above code :
What I have tried :
set slotDuration to 24 at the same time than slotLabelInterval (It didn't works)
set slotLabelFormat: { weekday: 'short', month: 'short' } (It didn't works, it always display slot time label )
Question: How to make the same effet like the first screenshot with V5
In v4 (or the v5 beta) you can set the same time period like this:
slotLabelInterval: { days: 1 },
Demo: https://codepen.io/ADyson82/pen/abvqBrN
I need to display all the events of the year starting by the current date, so essentially from March to December, I tried setting up the property visibleRange as follows:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay'
},
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listWeek',
navLinks: true,
editable: true,
eventLimit: true,
events: <?= json_encode($events) ?>,
visibleRange: {
start: '2020-03-01',
end: '2020-12-31'
}
});
calendar.render();
});
the problem's that I get only the month of March is there a way to achieve this?
I get only the month of March
Actually, according to your code, what you will get is only a single week, or a single day. You cannot even show a whole month based on what you have written.
The issue with your attempt though is a simple logical one. You are defined views as listWeek and listDay. The names in these fix a period of time - "week" and "day" which the views will cover. This fixed period takes priority over any visibleRange setting.
If you want your view to take account of the visibleRange, then you must just specify the view name, without a fixed time period in its name:
header: {
left: 'prev,next today',
center: 'title',
right: 'list'
},
defaultView: 'list',
The above however will restrict you to only the exact time period specified. You cannot move to another year. To make this dynamic, you can use a function to calculate the visible range every time the view needs changing:
visibleRange: function(currentDate) {
var yr = currentDate.getFullYear();
return {
start: yr + '-03-01',
end: yr + '-12-31'
}
},
dateIncrement: { "years": 1}
Demo: https://codepen.io/ADyson82/pen/XWbgyGZ
P.S. Specifying a view name without a time period is demonstrated in the visibleRange documentation already.
I was tasked to do a basic timeline using the components of vis.js, the question is that I'm from Brazil, and the timeline os vis.js displays months in English and I need them to be in Portuguese, studying the docs I found something about locale that allows the change in language, but as much as I tried, I couldn't change it.
It would be of great help if you could help me do it, here is my code regarding the change in language:
var options = {
width: "100%",
height: "381px",
timeAxis: {scale: 'year', step: 1},
zoomable: false,
maxMinorChars: 1,
locales: {
mylocale: {
current: 'atual',
time: 'tempo'
}
},
locale: 'mylocale',
format: {
minorLabels: {
day: 'DD',
month: 'MMMM',
year: 'YYYY'
},
majorLabels: {
day: 'DD',
month: 'MMMM',
year: 'YYYY'
}
}
};
Code was based on this links:
(http://visjs.org/docs/timeline/)
(http://momentjs.com/)
I know this question is old and I don't know if the version of vis.js supported this when you asked the question, but...
the minorLabels and majorLabels can be functions instead of an object and you can return whatever string you want. The functions take 3 arguments (date, scale, step).
options: {
format: {
minorLabels: function (date, scale, step) {
// return minor label with date in your locale
},
majorLabels: function (date, scale, step) {
// return major label with date in your locale
}
}
}
I have a basic Ext.form.DateField which needs to have a minimum date.
Easy enough - just set the minValue field to whatever you want the minimum date to be. For example, to set the minimum allowable date to be the current month and year:
var myDateField = new Ext.form.DateField({
fieldLabel: 'Date',
value: new Date(),
columnWidth: 0.15,
padding: 5,
format: 'n/Y',
plugins: 'monthPickerPlugin',
hidden: false,
minValue: new Date()
});
If the user enters a date from the past, the form displays an error message that states 'The date in this field must be equal to or after ...' and the bound component.
However, what I really need is for the user to not even be able to SELECT an earlier year from the picker in the first place.
Basically, when the calendar comes up, I need for it to only display years 2015 and later - for the following, the years 2011, 2012, 2013, and 2014 should not even appear in the calendar.
Thanks in advance
Not sure that is doable.
You can disable dates using either the minValue or disabledDates configs, but they will still appear in the list.
However, once a user selects the month they are disabled, see below screenshot and sample:
disabled dates in calendar
ie.
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
minValue:"01/01/2015",
disabledDatesText:"Date not available.",
maxValue: new Date() // limited to the current date or prior
}]
});
<link href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>
<script src="//cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>
I'm using FullCalendar to display events entered by users. As such, I can't control when they are scheduled for.
Strangely, someone has scheduled an event for 11:59pm, and it is basically invisible on FullCalendar's agenda view.
Here is a JSFiddle for the scenario I'm describing. The JS is copied below:
$(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: false,
contentHeight: 300,
defaultView: 'agendaDay',
scrollTime: '24:00:00',
allDaySlot: false,
slotDuration: '00:15:00',
slotEventOverlap: false,
forceEventDuration: true,
defaultTimedEventDuration: '00:30:00',
displayEventEnd: false,
editable: false,
events: [{
title: 'Earlier (visible) Event',
start: new Date(y, m, d, 22, 00)
}, {
title: 'Late (hard to see) Event',
start: new Date(y, m, d, 23, 59)
}]
});
});
As you'll see on JSFiddle, the "Late (hard to see) Event" renders just two pixels tall at the bottom of the calendar, which is unusable. Is there a solution for this? Maybe some way to view the day through 1am the next morning, for instance?
Add maxTime: "24:59:59". That will extend the agenda view beyond midnight making your event visible.
Here's the jsFiddle: http://jsfiddle.net/0tm5cgjb/2/