Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to change alignment of slot label text #5159

Closed
neontuna opened this issue Nov 27, 2019 · 3 comments
Closed

Ability to change alignment of slot label text #5159

neontuna opened this issue Nov 27, 2019 · 3 comments

Comments

@neontuna
Copy link

Screen Shot 2019-11-27 at 11 51 59 AM

Demo here

Maybe this is intended behavior but when adding multiple tiers to slotLabelFormat for instance

slotLabelFormat: [
  { day: '2-digit' }, 
  { weekday: 'narrow' },
]

It seems like the text ought to be centered in container. However it does this sort of shifting alignment where days to the left of today are aligned right, today is centered, and days to the right are aligned left.

Maybe this in intended behavior but I would like to just center everything if possible. I wasn't sure if one of the render callbacks could be used to change this.

@acerix
Copy link
Member

acerix commented Nov 27, 2019

The top tiers is aligned like that since it can have very long slots and the label should stay visible, eg:

https://codepen.io/acerix/pen/vYYogaE?&editable=true&editors=001

It could be useful to have an option to make them always centered so I'll leave this as a feature request.

Since your tiers are the same size, one option is to simply combine them:

https://codepen.io/acerix/pen/PooMWyz?editors=0010

Otherwise you can use datesRender to remove the alignment CSS or add some HTML:

https://fullcalendar.io/docs/datesRender

@acerix acerix changed the title Text alignment with slotLabelFormat and multiple tiers Ability to change alignment of slot label text Nov 27, 2019
@acerix
Copy link
Member

acerix commented Dec 17, 2019

For reference, CSS hack to make them left aligned:

https://codepen.io/acerix/pen/vYYogaE?editors=0100

@arshaw
Copy link
Member

arshaw commented Jun 29, 2020

the original issue is no longer happening in v5:
https://codepen.io/arshaw/pen/BajwOyO?editable=true&editors=001 (no CSS workaround necessary)

@arshaw arshaw closed this as completed Jun 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants