Display the header of the day on the timeline view of the FullCalendar

Is there a way to show the day in the header of the resource timeline while using the fullcalendar plugin in single-day mode?

Week Display (Looks good.)

Days Display (Missing header here.)

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    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;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f197849d9d92909d9491848a93899c83bb8a939e94">[email protected]</a>/index.global.min.js"></script>

<div id='calendar'></div>

javascriptfullcalendarfullcalendar-schedulerfullcalendar-6

Answer №1

Utilizing the slotLabelFormat feature, you have the ability to customize the display of the first and second row independently for each type.

To configure this, specific predefined rules must be implemented, which are detailed in the Date Formatting section on fullcalendar.io.

views: {
  resourceTimelineDay:{
    slotLabelFormat: [
      {
        weekday: 'short',
        month: '2-digit',
        day: '2-digit',
        omitCommas: true, // removes comma after "day"
      }, // top level text
      {
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: true,
        meridiem: 'short'
      } // lower level text
    ],
  },
},

https://i.sstatic.net/MqVncRpB.png

Based on your preference for a layout similar to the resourceTimelineWeek view, I've configured a comparable first row for the resourceTimelineDay view. Additionally, I ensured the setup of the second row as well (as specifying it is necessary for its appearance).

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    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',
    views: {
      resourceTimelineDay:{
        slotLabelFormat: [
          {
            weekday: 'short',
            month: '2-digit',
            day: '2-digit',
            omitCommas: true,
          }, // top level text
          {
            hour: 'numeric',
            minute: '2-digit',
            omitZeroMinute: true,
            meridiem: 'short'
          } // lower level text
        ]
      }
    },
  });

  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;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0660736a6a65676a63686267742b75656e6362736a637446302837283737">[email protected]</a>/index.global.min.js"></script>

<div id='calendar'></div>

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

What are some solutions to fixing rendering problems in React?

As someone with limited coding experience, I decided to use chatGPT to help me create my website. However, things took a turn for the worse last week when I attempted npm install d3 and chaos ensued. To make matters worse, I forgot to back up my work. Cons ...

javascriptreactjs

Displaying a carousel of cards with a stacking effect using CSS and React

https://i.sstatic.net/254kG.jpgI am looking to design a layout similar to the image provided, where cards are stacked on top of each other with three dots for toggling. Can anyone guide me on how to achieve this visual effect? ...

javascriptcssreactjsbootstrap-4

Javascript's second element does not trigger a click event with similar behavior

I'm currently facing an issue with displaying and hiding notification elements based on user interaction. My goal is to have multiple popup elements appear when the page loads. Then, when a user clicks the ".alert-close" element within one of the popu ...

javascriptjqueryhtmlcss

When attempting to push `content[i]` into an array in AngularJS, it is flagged

In my JSON data, I have the following structure: var data = [{ id: 1, name: 'mobile', parentid: 0, limit:3 }, { id: 2, name: 'samsung', parentid: 1 }, { id: 3, name: 'moto', parenti ...

javascriptangularjsjson

Adjust the Size of iFrame Content Using JavaScript

Is there a way to automatically resize the content within an iFrame so it fits without adjusting the size of the iFrame itself? I want all the content inside the iFrame to scale down if there is too much to display. Does anyone have any suggestions on how ...

javascriptjqueryhtmliframe

Utilizing Javascript to determine normals vector by calculating surface angles: a step-by-step guide

Looking at the surface shown in the image, I have three angles (a, b, and c) and I am trying to determine the coordinates (x, y, z) for two normal vectors associated with it. One of these vectors is parallel to the surface, while the other one is perpendi ...

javascriptmathvector

Traverse a deeply nested JSON structure

I need assistance with looping through a complex JSON object using only JavaScript. My goal is to log each item along with its properties into the console. const nested_json = { "item1":{ "name": "banana", ...

javascripthtmljson

Ways to integrate mouse out functionalities using an if condition

I'm currently working on a menu using Javascript where clicking on one option will dim the other options and reveal a sub-menu. I'm looking to include an if statement in the function so that when a user mouses out of both the sub-menu and the cli ...

javascriptjquerydrop-down-menujquery-events

JavaScript tip: How to disregard symbols that affect the length of text in a textbox?

I am working on a task which involves counting only the text, excluding symbols, entered in a textbox. For instance, if a user types email_ex_3/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05374568646c692b666a68">[email ...

javascripthtml

javascript with a focus on objects

Having trouble with the scene.add(Obj); line for my object player1. I keep getting an error saying that Obj does not exist: function Player(x, y, z) { this.Speed = 0; this.AngleAcc = 0; this.Angle = 0; this.X=x; this.Y=y; this.Z=z; this.MaxSpeed = ...

javascriptthree.js

Generate a .py file through an HTML button click and save it to your device

My current project involves developing HTML and JavaScript code for a chatbot. I need to implement a feature where, upon receiving a Python program from the chatbot, a download button should be displayed. When users click on this Download button, they shou ...

javascripthtmlbootstrap-5

Using multiple where clauses in Firebase for advanced querying

Let me explain the scenario. Within my database, there is a Users collection. Some users have a property called userType, while others do not. The values for userType can either be person or company. I want to retrieve only the users that have the userTyp ...

javascriptnode.jsfirebasefirebase-realtime-database

What is the best way to establish communication between methods in a React application?

In the SelectedTopicPage component, I currently have two methods: navigateNext and render. My goal is to pass the value of topicPageNo from the navigateNext method to the render method. What is the best way to achieve this in React? When I attempt to decla ...

javascriptreactjs

Create dynamic elements in Vue.js components based on an object

I'm currently working on a component that will display elements within VueJs virtual dom using Vuex state. However, I have encountered an error that I am unable to comprehend and resolve: Avoid using observed data object as vnode data: {"class":"b ...

javascriptvue.jsvuejs2vue-componentvirtual-dom

Is the HTML Page loading before the AJAX call is made?

On my HTML Page, I have a button tag that looks like this: <button ng-hide="alreadyFreinds()" type="button" class="btn btn-primary btn-lg">Friend</button> However, when attempting to access certain parts of the alreadyFriends function shown b ...

javascripthtmlajaxangularjs

What is the best way to retrieve the outcome of a node-sqlite3 query beyond the scope of db.get()?

I'm attempting to validate whether the sha256 hash stored in my sqlite database corresponds with the sha256 hash of the password that the user transmitted to my NodeJS server. The Auth() method is meant to deliver either a true or false result. Is the ...

javascriptnode.js

AngularJS ng-repeat filter fails to update multiple columns at once

Here is the ng-repeat markup being used: <tbody> <tr ng-repeat= "(k, v) in loanapps | filter:SelectedStatus | filter:SelectedBorrower track by $index"> <td>{{v.Id}}</td> <td><a ui-sref="adminloandetails({loanid: ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

What is the method for providing external parameters to a JOI extension?

Perhaps JOI may not be the ideal tool for this particular task, but I am interested in utilizing it if feasible. Essentially, I have a scenario where a user is sending a request to an API to store specific metric data. Certain metrics are restricted based ...

javascriptnode.jsjoi

Retrieve the height of a div element in an AngularJS framework, and assign this value to a corresponding attribute of another element

Is it possible to retrieve the height of an element using AngularJS and assign it to another div's attribute? In my Bootstrap website, I have a fixed sidebar that needs to stop before reaching the footer. To achieve this, I currently have to manually ...

javascripthtmlangularjs

The jQuery change event does not fire once the DIV has been rendered, while working with CakePHP

Whenever a room_id is chosen from the drop-down menu, I utilize the JS helper to automatically fill in the security_deposit and room_rate input fields. However, there seems to be an issue where selecting a room_id causes the room_rate_update jQuery change ...

phpjavascriptjqueryajaxcakephp