FullCalendar css dosent work with nextjs | Next.js | Page 1

restive ermineBOT Oct 9, 2024, 9:21 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

vital slate Oct 9, 2024, 9:23 PM

#

   'use client'
   import React, { useState, useRef, useEffect } from 'react';
   import FullCalendar from "@fullcalendar/react";
   import dayGridPlugin from "@fullcalendar/daygrid";
   import timeGridPlugin from "@fullcalendar/timegrid";
   import interactionPlugin from "@fullcalendar/interaction";

   export const CalendarView = () => {
       const [currentDate, setCurrentDate] = useState(new Date());
       const { locale } = useTimelineStore(); // 'en-US' by default
       const calendarRef = useRef(null);

       return (
           <div className="w-full p-4 relative">
               {/* FullCalendar Component */}
               <div className='w-full'>
                   <FullCalendar
                       ref={calendarRef}
                       plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                       initialView="timeGridWeek"
                       headerToolbar={{
                           left: '',
                           center: 'title',
                           right: 'dayGridMonth,timeGridWeek'
                       }}
                       locale={locale}
                       events={[]}
                       nowIndicator={true}
                       height={800}
                       slotMinTime="00:00:00"
                       slotMaxTime="24:00:00"
                       allDaySlot={false}
                       slotDuration="01:00:00"
                       selectable={true}
                       selectMirror={false}
                       editable={true}
                       dayHeaders={true}
                       timeZone="UTC"
                       firstDay={1}
                       dayHeaderFormat={{ weekday: 'long', day: 'numeric' }}
                   />
               </div>
           </div>
       );
   };

kindred flax Oct 9, 2024, 9:42 PM

#

vital slate ```jsx 'use client' import React, { useState, useRef, useEffect } from 're...

are u sure u also import the css?

#

some libraries require that

vital slate Oct 9, 2024, 9:58 PM

#

Normally with version 6 there's no more css to add manually, it's done in shadow... didn't catch the name.
I found an official example repos and it is not added any more:
https://github.com/fullcalendar/fullcalendar-examples/blob/main/next13/pages/calendar.js

GitHub

fullcalendar-examples/next13/pages/calendar.js at main · fullcalend...

Simple example projects for FullCalendar. Contribute to fullcalendar/fullcalendar-examples development by creating an account on GitHub.

#

I wonder if it's because the version of nextjs 14 is no longer compatible.

kindred flax Oct 9, 2024, 10:01 PM

#

vital slate Normally with version 6 there's no more css to add manually, it's done in shadow...

i see

#

so no css is applied to the rendered html?

#

u probably checked right

#

i just realized, u also installed @fullcalendar/core right?

vital slate Oct 9, 2024, 10:24 PM

#

if i put the css import

vital slate Oct 9, 2024, 10:25 PM

#

kindred flax i just realized, u also installed @fullcalendar/core right?

yes

    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.10",
    "@fullcalendar/interaction": "^6.1.10",
    "@fullcalendar/react": "^6.1.10",
    "@fullcalendar/timegrid": "^6.1.10",

vital slate Oct 9, 2024, 10:25 PM

#

kindred flax so no css is applied to the rendered html?

no css is applied

kindred flax Oct 9, 2024, 10:26 PM

#

vital slate if i put the css import

uhm

#

u did check that the css exists right?

#

#

i dont see anything

vital slate Oct 9, 2024, 10:30 PM

#

That's why we used to have to add the css manually, but now it has to be integrated into the source tsx file and we don't need to do that any more. That was just an example if I import the css file directly.
I've seen that people with remix have the same problem: https://github.com/fullcalendar/fullcalendar/issues/7261

GitHub

Fullcalendar style not working on React Remix 1.14.0 · Issue #7261 ...

Which connector are you using (React/Angular/etc)? React Bug Description I have an issue when trying to use Fullcalendar on my Remix project, the styles are not loaded in remix js, any suggestion t...

kindred flax Oct 9, 2024, 10:32 PM

#

vital slate That's why we used to have to add the css manually, but now it has to be integra...

ah yeah i see

vital slate Oct 9, 2024, 10:33 PM

#

In all the examples I've seen in the package.json they don't have the ‘type’: ‘module’,

kindred flax Oct 9, 2024, 10:34 PM

#

vital slate In all the examples I've seen in the package.json they don't have the ‘type’: ‘m...

i found this for daygrid ->

:root{--fc-daygrid-event-dot-width:8px}.fc-daygrid-day-events:after,.fc-daygrid-day-events:before,.fc-daygrid-day-frame:after,.fc-daygrid-day-frame:before,.fc-daygrid-event-harness:after,.fc-daygrid-event-harness:before{clear:both;content:\"\";display:table}.fc .fc-daygrid-body{position:relative;z-index:1}.fc .fc-daygrid-day.fc-day-today{background-color:var(--fc-today-bg-color)}.fc .fc-daygrid-day-frame{min-height:100%;position:relative}.fc .fc-daygrid-day-top{display:flex;flex-direction:row-reverse}.fc .fc-day-other .fc-daygrid-day-top{opacity:.3}.fc .fc-daygrid-day-number{padding:4px;position:relative;z-index:4}.fc .fc-daygrid-month-start{font-size:1.1em;font-weight:700}.fc .fc-daygrid-day-events{margin-top:1px}.fc .fc-daygrid-body-balanced .fc-daygrid-day-events{left:0;position:absolute;right:0}.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{min-height:2em;position:relative}.fc .fc-daygrid-body-natural .fc-daygrid-day-events{margin-bottom:1em}.fc .fc-daygrid-event-harness{position:relative}.fc .fc-daygrid-event-harness-abs{left:0;position:absolute;right:0;top:0}.fc .fc-daygrid-bg-harness{bottom:0;position:absolute;top:0}.fc .fc-daygrid-day-bg .fc-non-business{z-index:1}.fc .fc-daygrid-day-bg .fc-bg-event{z-index:2}.fc .fc-daygrid-day-bg .fc-highlight{z-index:3}.fc .fc-daygrid-event{margin-top:1px;z-index:6}.fc .fc-daygrid-event.fc-event-mirror{z-index:7}.fc .fc-daygrid-day-bottom{font-size:.85em;margin:0 2px}.fc .fc-daygrid-day-bottom:after,.fc .fc-daygrid-day-bottom:before{clear:both;content:\"\";display:table}.fc .fc-daygrid-more-link{border-radius:3px;cursor:pointer;line-height:1;margin-top:1px;max-width:100%;overflow:hidden;padding:2px;position:relative;white-space:nowrap;z-index:4}.fc .fc-daygrid-more-link:hover{background-color:rgba(0,0,0,.1)}.fc .fc-daygrid-week-number{background-color:var(--fc-neutral-bg-color);color:var(--fc-neutral-text-color);min-width:1.5em;padding:2px;position:absolute;text-align:center;top:0;z-index:5}.fc .fc-more-popover .fc-popover-body{min-width:220px;padding:10px}.fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px}.fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px}.fc-direction-ltr .fc-daygrid-more-link{float:left}.fc-direction-ltr .fc-daygrid-week-number{border-radius:0 0 3px 0;left:0}.fc-direction-rtl .fc-daygrid-more-link{float:right}.fc-direction-rtl .fc-daygrid-week-number{border-radius:0 0 0 3px;right:0}.fc-liquid-hack .fc-daygrid-day-frame{position:static}.fc-daygrid-event{border-radius:3px;font-size:var(--fc-small-font-size);position:relative;white-space:nowrap}.fc-daygrid-block-event .fc-event-time{font-weight:700}.fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px}.fc-daygrid-dot-event{align-items:center;display:flex;padding:2px 0}.fc-daygrid-dot-event .fc-event-title{flex-grow:1;flex-shrink:1;font-weight:700;min-width:0;overflow:hidden}.fc-daygrid-dot-event.fc-event-mirror,.fc-daygrid-dot-event:hover{background:rgba(0,0,0,.1)}.fc-daygrid-dot-event.fc-event-selected:before{bottom:-10px;top:-10px}.fc-daygrid-event-dot{border:calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-daygrid-event-dot-width)/2);box-sizing:content-box;height:0;margin:0 4px;width:0}.fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}

#

what happens if u create a css and import that into your component

#

#

https://www.npmjs.com/package/@fullcalendar/daygrid?activeTab=code

npm

@fullcalendar/daygrid

Display events on a month view or "day grid" view. Latest version: 6.1.15, last published: 3 months ago. Start using @fullcalendar/daygrid in your project by running npm i @fullcalendar/daygrid. There are 500 other projects in the npm registry using @fullcalendar/daygrid.

#

its really weird how they do that

vital slate Oct 9, 2024, 10:44 PM

#

No, a priori it has no influence. I created the css file and imported it into my component, but nothing happened.
I'm going to make an issue on their github I think

kindred flax Oct 9, 2024, 10:44 PM

#

vital slate No, a priori it has no influence. I created the css file and imported it into my...

oh weird

#

yeah good idea

vital slate Oct 9, 2024, 10:51 PM

#

Yes, have you tried lib at home by any chance? Just to make sure it's not coming from my setup or something.

#

If anyone falls down here and wants to see the way out, it's next: https://github.com/fullcalendar/fullcalendar/issues/7793

GitHub

FullCalendar css dosent work with nextjs 14 · Issue #7793 · fullcal...

Reduced Test Case https://css-tricks.com/reduced-test-cases/ Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket? I understand Which c...

kindred flax Oct 9, 2024, 10:52 PM

#

vital slate Yes, have you tried lib at home by any chance? Just to make sure it's not coming...

can u share a minimal codebase or something?

vital slate Oct 9, 2024, 10:55 PM

#

npm install --save \
  @fullcalendar/core \
  @fullcalendar/react \
  @fullcalendar/daygrid

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!

export default function Calendar() {
  return (
    <FullCalendar
      plugins={[ dayGridPlugin ]}
      initialView="dayGridMonth"
    />
  )
}

and on the base page.jsx make <Calendar />

kindred flax Oct 9, 2024, 10:56 PM

#

alr one sec

kindred flax Oct 9, 2024, 10:59 PM

#

vital slate ```bash npm install --save \ @fullcalendar/core \ @fullcalendar/react \ @f...

#

vital slate Oct 9, 2024, 11:03 PM

#

and if you have npm install --save @fullcalendar/timegrid
et set plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
initialView="timeGridWeek"

kindred flax Oct 9, 2024, 11:04 PM

#

vital slate Oct 9, 2024, 11:04 PM

#

it should go something like this

kindred flax Oct 9, 2024, 11:05 PM

#

i mean looks good for me?

#

just the data is missing

#FullCalendar css dosent work with nextjs