i am creating a google calender clone like calender i need some help
this is what i have got but i want the calender to take the height which is remaining of the whole vh after the nav bar took some height . how can i do that ? and there is an another thing i want to achieve . conditional positioning how can i do that with tailwindcss
17 Replies
If the nav has a fixed height, use calc() to subtract the nav's height from 100vh and give that as the height of the calendar. If the nav does not have a known height, create a wrapper that holds both the nav and the calendar, and make the wrapper a flexbox with direction of column. Give the calendar flex basis of 100%.
it has a fixed height
so calc()
does tailwindcss has one
GeeksforGeeks
How to use calc() in Tailwind CSS ? - GeeksforGeeks
A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
i have another doubt
how to reduce the height of weekdays divs . it is in grid
Do you mean just the first row?
ya
Just put it in a seperate div ig
One grid div for weekdays and other grid div for rest of the calendar
there can be another way ig
or if you just want everything in one div then you can do
min-h-[whatever calc() height ur setting] grid grid-cols-7 grid-rows-[24px_1fr_1fr_1fr_1fr_1fr]any other way ? its looks filthy
π
ur doing tailwind bro
it looks filthy
this is the least filthy code
the "elegant" way would be the first approach i told you
its works so who cares ig hehe
fair
so this is actually a appointment booking and they said its need a calender view
its an assignment
thanks for help dude
np dude