Customize the header toolbar title in FullCalendar

I am using a basic fullcalendar with buttons in the headerToolbar

My question is, how do I customize the titles on these buttons?

https://i.sstatic.net/xAgXG.png https://i.sstatic.net/wK5IX.png

For example, instead of month view I'd like it to be just month, and instead of Next day, simply Next.

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    headerToolbar: {
      left: 'today prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineMonth,resourceTimelineYear'
    },
    initialView: 'resourceTimelineDay',
    scrollTime: '08:00',
    aspectRatio: 1.5,
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
  });

  calendar.render();
});
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6204170e0e01030e070c0603104f11010a0706170e071022574c53534c52">[email protected]</a>/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7513001919161419101b1114075806161d10110019100735405b44445b45">[email protected]</a>/main.min.js"></script>
<div id='calendar'></div>

javascriptfullcalendarfullcalendar-5

Answer №1

Full calendar utilizes title and aria-labelled values as hints. For instance, you can enhance the prev and next buttons by using the buttonHints option. Simply include it as a calendarOption in your code.

To implement this, adjust your code as shown below:

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    headerToolbar: {
      left: 'today prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineMonth,resourceTimelineYear'
    },
    initialView: 'resourceTimelineDay',
    scrollTime: '08:00',
    aspectRatio: 1.5,
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline',
    buttonHints: {
       next: 'next label',
       prev: 'prev label',
       month: 'month',
       day: 'day',
       week: 'week'
    }
  });

  calendar.render();
});

You can customize the labels next label and prev label to your preference.

For a working example, here is a link to a codepen: here.

Note: Updated labels for day, week, and month navigation.

Hopefully, this solution meets your needs :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to transfer HTML code from a textarea to CKEDITOR for setData?

My goal is to retrieve data from a textarea element and use it as setData for CKEDITOR. However, instead of receiving the HTML code, I am only getting the code as a string, which is not rendering properly as HTML. Here's the code snippet: CKEDITOR.re ...

javascriptjqueryhtmlckeditorckeditor4.x

Exploring the movement from one component to another in React Native

When working with React Native, I encountered a challenge in navigating between two views. The issue arises from having the button to navigate on one component while my main component is elsewhere. I am using react-navigation for this purpose. Here's ...

javascriptreactjsreact-nativereact-routerreact-navigation

The Chrome Extension was denied from loading due to a violation of the specified Content Security Policy

I am encountering an issue while loading a Chrome Extension using React. Whenever I try to load it, the error message below pops up: Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.min.js' because it violates the following ...

javascriptreactjsgoogle-chrome-extension

Employ the faker.js library to automatically create a form within casperjs environment

When using Casperjs to fill and submit forms, it is necessary to manually input the data each time. On the other hand, Faker.js can generate fake data that can be used in forms. The question then arises - how can these two be combined effectively? Consider ...

javascriptcasperjsfaker

in JavaScript arrays, the identifier follows the numeric value right away

Can anyone assist me with assigning a PHP array of image filenames to a JavaScript array? I have made some progress, here's my code: <script src="jq.js"></script> <?php $dir = 'images'; $images = scandir($dir); $true_images ...

phpjavascriptjqueryarrays

Encountering a parsererror with $.ajax while processing JSON that includes a new Date() object

After fetching JSON from a MongoDB database, I serialize it and send it back to the JavaScript client using a $.ajax call. Here is an example of the $.ajax call: function server_request(URL, httpMethod, dataObject) { var output = ""; var typeofD ...

javascriptjqueryajaxjsonmongodb

When using $resource.save, it returns a "Resource" instead of just an ID

For some reason, I am struggling with a seemingly simple task and cannot find a solution by going through documentation or other Angular related questions on SO. I may not be the brightest, so I could really use some help here as I am feeling stuck. Take ...

javascriptangularjsspring-mvcpostcallback

Wait until the link is clicked before showing the list element

Is there a way to prevent the display of list element id="two" in the code below until link "#two" has been clicked, removing element id="one"? I am looking for a CSS or JS solution that completely hides the list element rather than just hiding it from vie ...

javascriptjqueryhtmlcss

The CSS popup box fails to reset its data after being closed, and the closure button does not effectively close the popup

I am having an issue with a login popup on my website. Whenever I fill in the login or registration information and then close the popup, the next time I open it, the input box still contains the previous data. How can I reset the popup to always open with ...

javascripthtmlcssflexboxfrontend

Tips for extracting HTML tags directly from JSON data

In my dataset, I have a JSON illustration [{ "Field1": "<header class=\"main-header dark-bg\">\n\t\t<div class=\"row\">\n\t\t\t\t<div class=\"col-xl-3\">\n< ...

javascriptjqueryjsonajax

Creating a carousel of cards using JavaScript, CSS, and HTML

Here is a visual reference of what I'm attempting to achieve: https://i.stack.imgur.com/EoQYV.png I've been working on creating a carousel with cards, but I'm struggling to synchronize the button indicators with card advancement when clicke ...

javascripthtmlcsscarousel

Is it more efficient to have a single global event listener or multiple event listeners of the same type in each component for productivity?

This particular mixin is a key component in numerous pages, often appearing in multiple sections within the page. data: () => ({ device: { mobile: false, tablet: false, tabletLand: false, notepad: false deskto ...

javascriptperformancevue.jsvuejs2nuxt.js

The definitive method for resolving synchronization problems between Protractor and Angular

The Issue at Hand: We recently encountered a common error while attempting to open a specific page in our application during a Protractor end-to-end test: Error: We timed out waiting for asynchronous Angular tasks to complete after 50 seconds. This cou ...

javascriptangularjsseleniumprotractor

Show an error message in a popup window, following a validation error in Laravel

I am facing an issue with displaying error messages in the update modal form. I am using Laravel request for validation and AJAX to submit the form inside a modal. My goal is to show the error message for each field that is inputted incorrectly. However, i ...

javascriptphpajaxlaravelvalidation

Flexbox helps create responsive layouts with ease

Utilizing flex to centrally position my element within my layers has worked well for me, but I encountered an issue when switching to a smaller screen size. The element simply scales down in size instead of taking up the full width like it does with Bootst ...

javascriptjqueryhtmlcssflexbox

Create custom AngularJS directives for validation and store them in a variable

Through the use of AngularJS, I've developed a directive called "integer" that invalidates a form if anything other than integers are entered. Because I'm generating the page dynamically by fetching data from the database, it would be helpful to ...

javascriptangularjs

Dominant Editing through ASP.Net Roles

Looking for guidance on how to effectively use knockout with asp.net membership roles in MVC 4. My goal is to incorporate an editable grid on the page based on whether the user is an administrator or a 'registered user'. I want to ensure that use ...

javascriptjqueryasp.net-mvcasp.net-mvc-4knockout.js

Is there a way to populate fields on a hidden input using Mechanize?

When I try to use the form to navigate to a different page, I realize that the input field is hidden. Below is the HTML code for reference: <form id="form_pager" method="post" action=""> <input type="hidden" id="txtPage" name="page"> ...

javascriptformsperlwww-mechanize

Icon: When clicked, initiate a search action

I am looking to make the icon clickable so that it can be used as an alternative to pressing the "return key" for searching. Check out this bootply example at . You simply need to click on the magnifying glass icon and it will initiate the search. ...

javascripthtmltwitter-bootstrap

`Is there a way to avoid extra re-renders caused by parameters in NextJS?`

I am currently in the process of implementing a standard loading strategy for NextJS applications using framer-motion. function MyApp({ Component, pageProps, router }) { const [isFirstMount, setIsFirstMount] = useState(true); useEffect(() => { ...

javascriptreactjsparametersnext.jsframer-motion