List buttton not dispaly in the FullCalendar angular 8.

rasool shaik

6y1.1kAngular

please, anyone, help

this my code:

import listPlugin from '@fullcalendar/list';
this.model = [];
const todayDate = new Date();
const todayDateStr = todayDate.getFullYear() + '-'
+ ('0' + (todayDate.getMonth() + 1)).slice(-2) + '-'
+ ('0' + (todayDate.getDate())).slice(-2);
this.fullcalendarOptions = {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin,listPlugin ],
defaultDate: todayDateStr,
header: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth,listWeek',
},
};

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ronika Jency6y ago
Accepted answer
Hi rasool,

First, you have to install the full calendar library

https://www.npmjs.com/package/@fullcalendar/list

Full calendar official web site for your reference
https://fullcalendar.io/docs/list-view

Below is the working example for full calendar in angular

https://therichpost.com/angular-10-fullcalendar-list-view-working-example/
rasool shaik6y ago
Thank so much for Helping Laxmidhar Sahoo
rasool shaik6y ago
hi
Ronika Jency
list button Now it is working fine, issue is with version,
my full Calendar 4.4.0 but i install list vesrion 5.3.0
thank so much for helping
Ronika Jency6y ago
Hi,

Please add code and refer below link

import { Calendar } from '@fullcalendar/core'; // include this line
constructor() { const name = Calendar.name; // add this line in your constructor }

https://stackoverflow.com/questions/62239183/fullcalendar-lib-before-attempting-to-import-a-plugin
Laxmidhar Sahoo6y ago
Hi

Thw bellow link has all plugins

https://fullcalendar.io/docs/plugin-index

Thanks and regards
rasool shaik6y ago
Hi Ronika Jency
Am already install this package "@fullcalendar/list" in the application

When use this listPlugin am getting issue like this
PLEASE IMPORT TOP-LEVEL FULLCALENDAR LIB BEFORE ATTEMPTING TO IMPORT A PLUGIN
rasool shaik6y ago
this my html:

but when i use listPlugin in my code am getting issue like this.

PLEASE IMPORT TOP-LEVEL FULLCALENDAR LIB BEFORE ATTEMPTING TO IMPORT A PLUGIN

Am not apply any css in the css file but i check in inspect element below class apply to the fullcalendar

this ths css :
.fc {
.fc-toolbar {
.ui-icon-circle-triangle-e {
background: none !important;
font-family: 'primeicons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-indent: 0px !important;
text-align: center;
&:before {
content: "\e901";
}
height: auto;
width: auto;
overflow: visible;
}
.ui-icon-circle-triangle-w {
background: none !important;
font-family: 'primeicons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-indent: 0px !important;
text-align: center;
&:before {
content: "\e900";
}
height: auto;
width: auto;
overflow: visible;
}
}
.fc-event-container {
.fc-event {
font-size: $fontSize;
border-color: $primaryColor;
background-color: darken($primaryColor,5%);
}
}
}
Hamid Khan6y ago
I think your code is correct , but you have CCS issue,
Could you please put here your CSS that you applied