Having issues with Fullcalendar's custom view called "vertical resource view" functioning improperly

I am currently using fullcalendar 4 with angular and I am trying to implement a custom view based on this example:
https://fullcalendar.io/docs/v4/vertical-resource-custom-demo

The view I require spans across 5 days (Monday to Friday) for just one resource. Although I have edited the demo to meet my needs, the calendar is not consistently displaying all 5 days each time. For instance, this week it only shows from today until Friday, then jumps back to Tuesday of the previous week.

I have created a codepen showcasing my issue and the customized view:

  resourceTimeGridFiveDay: {
    type: "resourceTimeGrid",
    duration: { days: 5 },
    buttonText: "5 days"
  }

https://codepen.io/Archelite/pen/QWKQyZR

Could someone advise me on how to ensure that the calendar always displays the 5-day span (Monday to Friday) as intended?

angulartypescriptfullcalendarfullcalendar-4

Answer №1

If you want to create a 5-day view from Monday to Friday, simply adjust the settings of the vertical resource view by hiding weekends:

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'resourceTimeGrid' ],
    timeZone: 'UTC',
    defaultView: 'resourceTimeGridWeek', //SET TO NORMAL VERTICAL RESOURCE WEEK VIEW
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimeGridWeek'
    },
    resources: [
      { id: 'a', title: 'Room A' },
      { id: 'b', title: 'Room B' }
    ],
    events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
    weekends: false //HIDE WEEKENDS
  });

  calendar.render();
});

See the working demo here

For more information on the "weekends" setting, check out the documentation here

Answer №2

The reason for this issue is due to the exclusion of weekends. If you adjust duration: { days: 5 } to duration: { days: 7 }, it should resolve the problem. Additionally, if you prefer to begin your calendar on a Monday, simply modify initialView: 'timeGridWeek'

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 it possible to obtain the return type of every function stored in an array?

I'm currently working with Redux and typesafe-actions, and I am trying to find a way to automatically generate types for the actions in my reducer. Specifically, I want to have code completion for each of the string literal values of the action.type p ...

typescript

Using TypeScript with slot props: Best practices for managing types?

In my current project, I'm utilizing slot props. A key aspect is a generic component that accepts an Array as its input. This is the structure of MyComponent: <script lang="ts"> export let data: Array<any>; </script> ...

typescriptsveltesvelte-3

What is the best way to create a props interface that includes state and setState values that are being

As I dive deeper into TypeScript, a hurdle has appeared in my app. Upon introducing React.FunctionComponent to my components, an issue arose with my Props interface. The error message reads: Type '({ value, setValue, }: Props) => JSX.Element' ...

reactjstypescriptnext.js

What is the process of personalizing a DaisyUI theme in Tailwind with TypeScript?

I am trying to tailor an existing DaisyUI theme using my tailwind.config.ts file for my Next.js project. Although the DaisyUI documentation only provides examples in JavaScript (text), I want to customize it within my TypeScript environment. Below is a s ...

typescriptnext.jstailwind-cssdaisyui

The Vue application is refusing to compile due to a syntax error caused by the presence of 'return' outside of a function

Upon attempting to run a build on my Vue app, I encountered the following syntax error. error in ./src/pages/Calendar.vue?vue&type=script&lang=ts& Syntax Error: 'return' outside of function. (175:4) 173 | getEventColor(event, Even ...

typescriptvue.jscalendarvuetify.js

Can someone give me a thorough clarification on exporting and importing in NodeJS/Typescript?

I am inquiring about the functionality of exports and imports in NodeJS with TypeScript. My current setup includes: NodeJS All written in Typescript TSLint for linting Typings for type definitions I have been experimenting with exports/imports instead o ...

node.jsimporttypescripttslint

Is the component experiencing issues with its style functionality?

I am attempting to add CSS styles to app.component.ts using the :host property, but I am not seeing the desired results. The CSS is being applied, but not correctly. .ts export class AppComponent { title = "Default Title" data = 'This is defaul ...

cssangular

Problem with execution of TypeScript function from HTML

I have been facing an issue where I am attempting to click a button on an HTML page to trigger a TypeScript function called `getToken()`. Strangely, the function does not seem to get executed when the button is clicked. Surprisingly, I have tested the `get ...

angulartypescript

Executing mocha using Typescript results in a TypeError [ERR_UNKNOWN_FILE_EXTENSION] because the file extension ".ts" is unrecognized

I've been experimenting with Typescript and Mocha to write some tests. After following the documentation, I've set up the following: package.json { //... "scripts": { "test": "mocha", }, //... } .mocharc.j ...

node.jstypescriptmocha.js

Ways to ensure ngModel is accessible across components

I've hit a wall and I'm starting to lose my mind. I've tried all the different methods like FormsModules, ReactiveForms, FORMDIRECTIVES, Input, Output, but I just can't seem to figure out how to make ngModel work between components. My ...

javascriptangulartwo-way-bindingngmodel

Mapping Observable.forkJoin() responses to the respective requests can be achieved by following these steps

I have a tool that uses the httpClient to generate response observables for a pipe. I also have a collection of request URLs. This is how the code appears: let observables = urls.map(url=>myPipe.transform(url)); forkJoin(observables).subscribe(results=& ...

angular

There is no index signature that includes a parameter of type 'number' on the specified type xx

Here are the data types I am currently utilizing: export interface IHelpDeskTextData { supportPaneltext: ContactHelpdeskContex[]; selected?: number | null; brandOptions?: string[]; textPanel?: ITextPanel[]; } export class ContactHelpdeskContex { ...

typescript

Encountering difficulty in reaching the /login endpoint with TypeScript in Express framework

I'm currently working on a demo project using TypeScript and Express, but I've hit a roadblock that I can't seem to figure out. For this project, I've been following a tutorial series from this blog. However, after completing two parts ...

node.jstypescriptexpress

Problem with (click) event not triggering in innerHtml content in Angular 4

For some reason, my function isn't triggered when I click the <a... tag. Inside my component, I have the following code: public htmlstr: string; public idUser:number; this.idUser = 1; this.htmlstr = `<a (click)="delete(idUser)">${idUser}&l ...

htmlangulartypescript

Is TypeScript declaration merging not functioning properly?

Trying to enhance an existing interface with a new member is causing Typescript errors for me. // foo.js export interface IOption { xOffset: number } import {IOption} from 'foo'; // Attempting to extend IOption with `yOffset`, but encounter ...

typescript

"Running into Memory Limitations: Resolving System.OutOfMemoryException in ASP.NET Web API Integrated with Angular

Currently, I am working on integrating Angular 2+ with asp.net Web API. The issue I am facing is related to dealing with a C# DataTable that is being returned to Angular 2+. To do this, I am utilizing the Post method. The problem arises when I try to retr ...

c#typescriptasp.net-web-api

Unable to locate the module '@vitejs/plugin-react' or its associated type

After creating the project with npm create vite@latest and selecting ts-react, everything seemed to work fine when I ran npm run dev. However, in my vs code editor, I encountered the error message "Cannot find module '@vitejs/plugin-react' or its ...

typescriptvite

Form in Angular 6 does not trigger the event

I am currently utilizing Angular 6 and have created an attribute directive. Within this directive, I have defined a click event. @Directive({ selector: "[pa-attr]" }) export class PaAttrDirective { @Input("pa-attr") @HostBinding("class") bgC ...

angular

An issue has occurred where all parameters for the DataService in the D:/appangular/src/app/services/data.service.ts file cannot be resolved: (?, [object Object])

Upon running the command ng build --prod, an error is encountered. Error in data.service.ts: import { BadInput } from './../common/bad-input'; import { AppError } from './../common/app-error'; import { Injectable } from '@angular ...

angulartypescript

Encountered an issue launching the advanced web server and reverse proxy server nginx for high performance

UPDATE - Recently, I encountered the following error logs: nginx: [emerg] unknown "request_url" variable Aug 19 01:14:58 nginx[4890]: nginx: configuration file /etc/nginx/nginx.conf test failed Below is my nginx.conf file: user www-data; worker ...

angularubuntusslnginxdigital-ocean