Customizing the full calendar_scheduler: Adjusting the minimum width of Resource columns in the vertical agenda day view for a horizontal scroll

Hey everyone, I'm facing an issue and could use some help! I am currently using the Scheduler in FullCalendar. As I add more resources, the columns for each resource become smaller in order to fit the calendar. However, I would like to set a minimum width for the columns and have a horizontal scroll instead. I attempted to achieve this by setting the following CSS:

.fc-view.fc-agendaDay-view.fc-agenda-view{ width: 500%; }

Unfortunately, this solution is not efficient as the columns shrink again when more resources are added.

cssplugins

Answer №1

I utilize fullcalendar.io for my scheduling needs. The corresponding HTML code is 

<div id="calendar"></div>
. In order to display additional resource columns, I implement the following JavaScript:

resources: [
{ id: 'BSNa', title: 'Bác sĩ Na'}
{ id: 'BSHai', title: 'Bác sĩ Hải' },
{ id: 'BSPhuong', title: 'Bác sĩ Phương' },
{ id: 'BSAnh', title: 'Bác sĩ Ánh'},
{ id: 'BSMinh', title: 'Bác sĩ Minh'},
{ id: 'KTVa', title: 'KTV Ánh', },
{ id: 'KTVb', title: 'KTV Minh', },
{ id: 'KTVc', title: 'KTV Ánh', },
{ id: 'KTVd', title: 'KTV Minh', },
]

view image description here

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

iPhone 5s landscape mode causing issues with media query

I have been testing a media query that looks like this: @media screen and (max-width: 600px) { .blah { font-size: 1.25rem; } } When I test this in responsive mode on browser dev tools, everything looks great. I can see all the changes as I resize ...

htmlcssiphonemedia-queries

Customize the MUI Slider Component with unique colored thumbs

Check out MUI's slider component at this link. I'm using it to let users select a value range with two thumbs. You can find the documentation for MUI's multi-thumb slider here. If you want to customize the style of the slider thumb, visit ...

javascriptcssreactjsmaterial-uislider

What is the best way to replicate the orange outline when focused?

I am in the process of creating a series of divs that can be navigated by the user using the tab key. I would like to incorporate the standard orange focus outline for these elements. Is there anyone who can provide guidance on how to achieve this? I unde ...

htmlcssfocus

Are the Bootstrap columns arranged in a vertical stack instead of side by side?

I currently have two large columns that are stacked vertically on top of one another. I want them to be side by side, like | 1 | 2 |, so that the user can view both columns simultaneously. I am seeking tips or suggestions on how to resolve this issue. Whil ...

javascripthtmlcssbootstrap-4

Creating flex items that mimic the fluidity of text

Is there a way to achieve fluid text behavior for flex items like in the following example: .container{ display: flex; flex-wrap: wrap; max-width: 200px; background: red; } div:not(.container){ w ...

htmlcssflexbox

How to temporarily change CSS color for 5 seconds using JavaScript and incorporate an easing effect?

Regarding this query: JavaScript - Modifying CSS color for 5 seconds Here is a live example of the solution: http://jsfiddle.net/maniator/dG2ks/ I am interested in adding an easing effect to the transition, gradually making the color fully opaque and t ...

javascriptcssjquery-easing

Preventing an object from exceeding the boundaries of its designated space

My DIV is filled with user-generated content, which sometimes begins with an item that has a margin-top that overflows the container, creating a gap between it and preceding elements. I've discovered that changing the display property to either inline ...

css

Bootstrap requires Visual Studio Code live-server plugin to function properly

I have been utilizing the Visual Studio Code IDE for my coding projects, along with a helpful plugin called "live server" that allows for quick checks of code changes. Everything was running smoothly with Bootstrap until I encountered an issue. When I att ...

htmlcssidevisual-studio-codebootstrap-4

Background Image Division (Twitter Bootstrap)

I am facing a challenge while creating a module with a span8 width and varying height. The div contains an image that dictates its height, with text overlaid on the image. My issue lies in preventing part of the image from getting cropped when Bootstrap re ...

htmlcsstwitter-bootstrapresponsive-design

Carousel-item height in Bootstrap 4.6

I am facing an issue with a component in Angular 14 using Bootstrap v4.6: <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div cl ...

cssangularbootstrap-4carousel

Having divs stacked on top of each other with one positioned fixed and the other

In my HTML document, there is a main div element called container that contains several child elements also in the form of divs. One specific child div, named top_bar, has its positioning set to fixed, while the rest of the child divs have relative posit ...

htmlcssposition

Text will not be displayed when it is written on images

I'm currently facing a challenge with adding text onto two different images, one on the left and one on the right. I have included HTML and CSS code but it seems to be incorrect. Can someone please help me fix it? #container { width: 400px; hei ...

htmlcss

Opposing the fill attribute with the current color

Is there a way to reverse or eliminate the effect of fill: currentColor? .svg-icon * { /* Targeting all sub-elements to customize icons with a specific color */ fill: currentColor; } .svg-icon.iconLogoGlyph * { /* How do I cancel out fill: curren ...

csssvg

Images that dynamically adjust to different screen sizes with captions that are perfectly

For a while now, I have been utilizing <picture> to display images with more design control. I typically use CSS to show or hide specific images within the <div> block. However, I am now considering using <figure> with <figcaption> ...

cssresponsive

Is there a way to ensure a dialog box is positioned in the center of the window?

After adjusting the dimensions of my jQuery UI dialog box with the following code: height: $(window).height(), width: $(window).width(), I noticed that it is no longer centered on the window. Do you have any suggestions on how I can recenter it? ...

javascriptjquerycssjquery-uijquery-dialog

Different ways to adjust the positioning of the HTML canvas created using p5.js

I am attempting to integrate the output canvas from p5.js into my webpage by following a tutorial heretutorial. I am hoping that the canvas will appear where I have positioned it within the HTML body. However, no matter what I try with CSS properties like ...

javascripthtmlcssp5.js

Is it possible to create a pure CSS responsive square that is positioned to the top right of a div element of any size?

My current goal is to achieve the following task... I aim to position a square perfectly in one or both corners of the top right section of a div, ensuring it never exceeds the boundaries regardless of the div's size or dimensions that necessitate th ...

htmlcssgradient

Identify support for the :first-child pseudo-class

Is there a way to determine with JavaScript whether the browser is compatible with the CSS :first-child selector? ...

javascriptjquerycsscss-selectors

Is it possible to modify the font color of a specific MenuItem in material-ui?

I've scoured every corner of the internet, but I'm still stumped by this question: How can I tweak the text color (not the background) for a selected or hovered MenuItem? I know the solution lies within useStyles, but my attempts thus far have be ...

javascriptcssreactjsmaterial-ui

What is the process for reinserting a list item into the nested elements?

Looking for help with manipulating a menu in HTML? I have a menu that I want to modify by removing and adding list items. While I've had success removing items, I'm struggling to properly use the add method. Here's an example of what my menu ...

javascriptjqueryasp.netcss