After installing FullCalendar.Js and importing the css to the component. Set up the FullCalendar component: Add the FullCalendar component to your render method and configure it with the desired plugins and options. const MyCalendar = () => { const handleDateClick = (arg) => { alert(‘Date clicked: ‘ + arg.dateStr); }; return ( <FullCalendar plugins={[dayGridPlugin, timeGridPlugin,… Continue reading How to set and use the Fullcalendar.js in the react project
Author: Sangamesh
How to Install and import fullcalendar.js on react Project
Integrating FullCalendar.js into a React project involves several steps, including installing the necessary packages, setting up the FullCalendar component, and configuring it according to your needs. Here’s a step-by-step guide to help you set up FullCalendar in your React project: Install the necessary packages: First, we need to install FullCalendar along with its React wrapper… Continue reading How to Install and import fullcalendar.js on react Project
How to create a new section on the payload on the collection and show the content on the api using API
First Create a new folder inside the collection folder and create an “index.tsx” file inside that folder section In that folder, you can define the various sections, like whom you want to give access to fields, like shown below import type { GlobalConfig } from ‘payload/types’; import { checkRole } from ‘../collections/Users/checkRole’ export const ThemeContent:… Continue reading How to create a new section on the payload on the collection and show the content on the api using API
How to add Tooltip to fullcalender.js using react-tooltip
In this article, we will see how to add a tooltip to Fullcalendar First, install the react tooltip using the below command npm i react-tooltip then import the tooltip on the file import { Tooltip } from ‘react-tooltip’; call the Tooltip component within this select attribute of anchorSelect, that on which element you need to show… Continue reading How to add Tooltip to fullcalender.js using react-tooltip
Removing the “+1 more” default function from FullCalendar when the screen width is reduced to tab or mobile screen width
Removing the “+1 more” default function from FullCalendar when the screen width is reduced to tab or mobile screen width on the full calendar, there some functionality that will be activated. when the screen width is reduced to a certain width and if the content is overflowing, it will show the content in the form of… Continue reading Removing the “+1 more” default function from FullCalendar when the screen width is reduced to tab or mobile screen width
How to create a New Fields on the existing the Users Tabs on payloadCMS
Solution note: To create the necessary field on the user tab, for more specific information on the user detail 1. Login to the administrator in the payload. 2. Then, browse to the Users option from the side navbar. 3. Check which fields are available in the User tab. Follow this in the code section 1.… Continue reading How to create a New Fields on the existing the Users Tabs on payloadCMS
How to Routes to other pages on Next.js 13 and above
Routing in Next.js is straightforward thanks to its file-based routing system and built-in next/link and next/navigation modules. Here’s a guide to help you navigate to other pages in a Next.js application: Step 1: Setup Pages In Next.js, any file you add to the pages directory automatically becomes a route. For example, creating about.js inside the… Continue reading How to Routes to other pages on Next.js 13 and above
How to remove cookies from web-application when user is logged out
in this article we will see how to remove cookies (from module js-cookies) Step 1: Remove a Cookie To remove a cookie, use the(“Cookies.remove”) method. You need to pass the name of the cookie you want to delete. Optionally, you can specify additional attributes (like path) if the cookie was set with specific attributes. Basic… Continue reading How to remove cookies from web-application when user is logged out
How to configure toastifier on the web-application
A toastifier is used to show the message banner on the website, for example showing form submissions, warning Messages, and etc.) To set-up the toastifier on the web page Step 1. First, you need to install the react-toastify package in your React project. Use npm or yarn to add it as a dependency: npm install… Continue reading How to configure toastifier on the web-application
How to run the build application on the firebase using firebase emulator
Running a build application using Firebase Emulator involves several steps. Here’s a guide to help to set up and run your application locally with Firebase Emulator: Prerequisites Node.js and npm: Ensure that you have Node.js and npm installed on your machine. Firebase CLI: Install the Firebase CLI if you haven’t already npm install -g firebase-tools… Continue reading How to run the build application on the firebase using firebase emulator