Hello, I am currently experimenting with integrating JQUERY functionality into React, and it truly feels like magic. After conducting extensive research, I am attempting to trigger the Bootstrap Modal using an external function. Here is a link to my code ...
Currently, I am working on a project in React using npm fullcalendar. One of the requirements is to change the color of the current day. After some trial and error, I was able to achieve this by adding the following code: $('.fc-today').attr(&ap ...
The code snippet below is a segment of the code generated by the FullCalendar jQuery plugin version 2. It has undergone some changes from version 1.x in terms of the classes it utilizes. <div class="fc-slats"> <table> <tbody> ...
I have integrated the fullcalendar plugin from GitHub into my project. I am looking to implement a feature where I can retrieve more events from multiple server-side URLs through Ajax requests. Currently, the initial event retrieval is functioning proper ...
I am working with a calendar feature on my web application using Adam Shaw's fullcalendar 2.1.1 JS library. I have successfully set up right-click responses for events and days by binding the "mousedown" event in the dayRender and eventRender callback ...
I need help with properly defining the schema for an EventObject, specifically what should be included within the "extendedProps" key. Currently, my schema looks like this: interface ICustomExtendedProps { privateNote?: string; publicNote?: string; ...
Currently, I am in the process of building a mobile application using ionic and cordova. My goal is to incorporate a timetable system utilizing Fullcalendar and a PHP page that showcases MySQL data in JSON format. Despite my efforts, I am encountering diff ...
I'm currently working on a project involving Asp.Net MVC and I would like to incorporate Jquery fullcalendar into it. One feature I want is for a newly added event to change its color if there is already an existing event scheduled for the same day. ...
After updating from fullCalendar 1.6 to 2.6, all functionality seems to be working except for eventResize. In the newer version, I am unable to see the resize arrow when attempting to adjust events, although it was functioning properly in the previous ver ...
Is there a way for me to use multiple calendars and remove the time axis in the agenda view? I have tried using the axisFormat option to eliminate the numbers/content in that column, but I'm struggling to set the width to 0 or make any other adjustmen ...
I am encountering an issue while attempting to drag events from the external events box to the fullcalendar. To replicate the problem, you can visit this CodePen: Initially, dragging an external event into the calendar works smoothly. However, after appl ...
I'm encountering an issue while trying to set up the angular-ui calendar. When I run it, I get the following error: TypeError: undefined is not a function at Object.eventsWatcher.onChanged (http://localhost/fisioGest/js/calendar.js:262:41) Despite b ...
Is there a way to update events on a calendar without refreshing the page every time a change is made, such as adding a new event, updating an event, changing an event, or dragging a new time or user? Currently, I am using version 5 of FullCalendar. < ...
Struggling to integrate FullCalendar-vue with Typescript, I encountered a problem when trying to access its API. This is how my calendar is set up: <FullCalendar ref="fullCalendar" :options="calendarOptions" style="width: 100%& ...
I've been working on integrating a FullCalendar module into my Angular 7 project. Despite following the steps provided in this link, I haven't had any luck: After executing this command: npm install <a href="/cdn-cgi/l/email-protection" clas ...
For the newest version of FullCalendar, I am in need of the dayRender callback to modify the color of disabled days. Unfortunately, this specific callback only functions for month, basicWeek, and basicDay views. However, I require this functionality for a ...
Using the FullCalendar plugin, I attempted to achieve a specific functionality, but unfortunately fell short of my goal. Below is the snippet of my scripting code: $('#calendar').fullCalendar({ //theme: true, header: { ...
I have been using the fullcalendar npm package to display a calendar on my website. I am trying to figure out how to set a background color for a specific selected date. I tried looking into this issue on GitHub at this link. However, it seems that dayRe ...
I need help integrating Full Calendar into my Nuxt project. The code I have so far is as follows: <template> <div> <FullCalendar :options="calendarOptions" /> </div> </template> <script> import FullCale ...
As I develop a calendar and timeline view using fullcalendar v5, my clients are requesting a month view that displays the entire month without any scroll bars. While I am aware of setting the contentHeight to auto, there seems to be no option for adjusting ...
When using Full Calendar with VueJS, I ran into a problem where I needed to open a custom modal when clicking on a time slot in the calendar. The issue was that I couldn't call a function outside of the Full Calendar object to handle this. This is bec ...
I have recently set up a running jQuery FullCalendar and encountered an issue where the calendar is displaying the wrong day. Today is March 21, 2014 (Friday) but it is showing as Saturday (Sab in Italian). The version of FullCalendar being used is 1.6 (t ...
My MERN stack application utilizes the FullCalendar plugin, even though I am aware that mixing jQuery with React is not ideal. Unfortunately, I am a novice developer and running behind schedule. The goal is to allow users to click on an event on the calen ...
I'm a big fan of the fullcalendar plugin and all its amazing features. I want to enhance it by displaying more customized information for each event when in agendaWeek or agendaMonth view. Switching between views is easy, but I need help filtering out ...
Issue Background In my current project, I am utilizing FullCalendar v5.11.0, NextJS v12.0.7, React v17.0.2, and Typescript v4.3.5. To set up a basic calendar based on the FullCalendar documentation, I created a component called Calendar. Inside this comp ...
Hey there, I'm currently working with the fullcalendar jquery plugin v2.6.1 and I have a question about preventing external events from being highlighted while they are being dragged onto the calendar. Is there a way to stop the fc-highlight from app ...
What is the best way to hide ONLY events on a calendar? I was considering deleting all events when the user clicks the "month" button. How can I achieve this functionality? $scope.uiConfig = { calendar: { height: 450, editable: false, ...
Currently, I am utilizing the fullcalendar plugin with the 'agendaweek' view. My goal is to showcase the available time slots as clickable and highlight the busy ones with a red background. Handling the highlighting of busy slots is not an issue ...
I am currently utilizing fullcalendar 4 on my website and I am attempting to incorporate an indicator for when a user selects a date on the calendar. While the background color changes, it's not very visible. My aim is to replicate the functionality ...
After saving a dialog when creating a new event by clicking the day, I use the following code: addEvent(calEvent); // save to database when creating an event $dialogContent.dialog("close"); $('#calendar').fullCalen ...
I currently have Fullcalendar set up to display events from a MySQL table (title + datetime) and allow users to add new events by clicking on a specific day within the calendar. However, I am facing an issue where it only adds events to the current day ev ...
Is it possible to add HTML content to an event title using eventRender in FullCalendar version 4? document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new ...
The code snippet for the select: function within fullcalendar is as follows: select: function(start, end, jsEvent, view) { if (start.isBefore(moment())) { $('#calendar').fullCalendar('unselect'); return false; } else { //ajax Cal ...
Hello, I am reaching out here for the first time with a question. Despite searching on various platforms like Stack Overflow, I have not been able to find a definitive answer regarding what is needed for FullCalendar to properly accept a jQuery data proper ...
I'm struggling to figure out how to update or delete fullcalendar events in my Symfony project. When adding a new event, I open a modal window with a form for submitting the event and inserting it into the database. This is my working controller: $ ...
I am currently working on integrating the fullcalendar plugin with my JSON data, and so far it's been a smooth process. While I have successfully loaded my JSON data, I have noticed that on some days there are too many events being displayed at once. ...
Is there a way to make the modal variable global by setting it as var modal = $("#modal"); ? The code snippet below includes the modal variable and is not functioning properly. It needs to work correctly in order to display: "Hello name, You have signed u ...
I am currently working on rendering a full calendar and I would like each cell to be displayed in a different color based on an array that contains color values for each day of the month. The array is retrieved in JSON format. Here is an example JSON arra ...
I have successfully added a custom button to my JavaScript full calendar code, but I would like this button to be displayed only in the month view. $(document).ready(function() { var calendar = $('#calendar').fullCalendar({ editable: tru ...
function moveEvent(event, delta, revertFunc) { console.log(event.title + " has been moved to " + event.start.format()); var page = '../include/UpdateCalendarEvent.php'; $("#dialog") .data('start', event.start.format ...
Currently, I have implemented a fullcalendar feature that displays entries for multiple users with different colored calendars. However, there seems to be an issue when dragging an entry to another date - the color reverts back to default. Below is an exa ...
Currently experimenting with FullCalendar v5 for React and exploring the Resource Timeline view feature. Facing an issue with the "loading" function - the idea is to monitor the state of FullCalendar and, if it's in a loading state, display a Spinner ...
I am currently using Angular UI-Calendar to display events on the Calendar. The events are appearing correctly on the Calendar, but when I update the details of an event, the changes are not reflected in the Calendar display (for example, the start date). ...
I have encountered an issue with my basic FullCalendar setup. Initially, when the calendar is loaded, it appears empty even though there are events scheduled for that month. However, if I navigate to the next month and then return to the current month, the ...
As a beginner with Ui calendar, I am seeking guidance on how to prevent users from selecting or interacting with previous dates in Ui-calendar using angularjs. While the Eventdrop, EventResize, and eventclick features are functioning properly for me, it ...
Implementing the FUllCALENDAR CSS template for creating a meeting calendar has been my current project. The servlet class I am using is CalendarController. However, when running it, the output appears as follows: {"events":[{"id":1,"title":"1","s ...
In the configuration: select: this.handleManualSelect.bind(this), dateClick: this.dateClick.bind(this), eventClick: info => { console.log(info, 'click'); }, eventMouseEnter: info => { console.log(inf ...
Using primeng p-fullcalendar in my angular application. Encountering an error in the command-line: 'Cannot find namespace 'FullCalendarVDom' Also seeing this error in the browser: 'Please import the top-level fullcalendar lib before a ...
Is there a way to display a unique header title for each calendar in my collection of 16? I've been trying various modifications to the code snippet below with no success: firstDay: <?php echo $iFirstDay; ?>, header: { left: 'prev,next ...
Having some confusion with installing Fullcalendar in my Angular 8 project. I followed the instructions on the Fullcalendar website and installed the package under @fullcalendar using npm install --save @fullcalendar/angular, but then came across examples ...
Currently, I am using Fullcalendar to update events. My goal is to execute an ajax callback to retrieve the edited version of a specific event. The endpoint for this request should be at /controls/:id/edit. To achieve this functionality, I have implemented ...
I have a scenario where I need to change the view by calling gotoDate and then apply additional classes using jQuery to selected events after clicking a button. The issue arises because the events are loaded via ajax, causing the addition of classes to oc ...
I've created a Calendar that showcases various events using fullcalendar. The events span from the years 0001 to 6000. Fullcalendar requires dates in ISO8601 format, and I am providing them as such. Events from the years 0100-6000 render perfectly w ...
When working with third-party components, you can include their styles by importing their stylesheet into your component or _app.tsx file. For detailed instructions on how to do this, you can refer to Next.js documentation. Another option is to add the sty ...
Is there a way to change the viewing date of a component using a 'DropDown' filter? I've seen plenty of answers about changing views, but nothing specifically on changing dates T^T Can anyone provide some helpful insights on this topic? ...
I currently have a fullcalendar that initially displays all events. I am using a select dropdown to filter the events, which works well. However, when the calendar re-renders after moving to the next month, it shows all events again. Here is my calendar in ...
My issue lies with the implementation of fullCalendar. Specifically, I am utilizing the week view (defaultView: 'basicWeek') with the toolbar buttons for 'today', 'prev', and 'next'. The problem arises when I click t ...
I am currently facing an issue with the full calendar plugin. In my set up, I have 3 resources along with some external events. The problem arises when I try to drop an external event onto the calendar - I want to retrieve the resource id from which the ev ...
I am currently working on creating a unique calendar display that showcases all the weekdays and events, regardless of the specific day in a month. The dates extracted from the database may seem "random", but in my C# code, I have devised a method to map e ...
My code using jQuery FullCalendar was working perfectly until December rolled around. For some reason, the events function is setting calMonth to 0 and calYear to 2018. I can go back to November without any issues, but I do have events scheduled for Decemb ...
Currently, I am working on an MVC project that focuses on tracking vacation days taken by employees. My goal is to display these dates using FullCalendar for each individual employee. At the moment, I can only showcase all employees or none at all, so I am ...
Can anyone provide guidance on how to effectively utilize AngularStrap's popover feature with Fullcalendar? The module declaration I have is as follows: angular.module('calendarModule', [ 'ui.calendar', 'ui.b ...
Currently, I am integrating fullcalendar 5.5.0 with Angular 10. After migrating from fullcalendar v4 to v5, I noticed an annoying issue where the header for the date before the validRange start is no longer displayed: These are the parameters being used: ...
After pushing events loaded from the server, I am encountering an issue where they are not being displayed on the calendar. Interestingly, the events are in the correct format and can be seen when printed on the page, but for some reason, they do not show ...
I am currently working on setting up a JQuery plugin (FullCalendar) within my Aurelia application, which is built using TypeScript. I am relatively new to web development and just trying to get a basic example up and running. To start off, I utilized this ...
Is there a way to extract only the time from an eventclick event in fullcalendar? Currently, I am receiving details about the event including date and time. How can I specifically retrieve just the time (e.g. 6:00:00 am)? You can find the code snippet tha ...
I have been using the Fullcalendar plugin and I am wondering if there is a way to navigate from day to day instead of in 3-day increments when using the resourceTimeline view with a duration set to 3 days. Thank you calendar = new FullCalendar.Calendar(ca ...
Our software utilizes multiple jQuery fullcalendars on a single page for machine scheduling purposes. Each calendar triggers an AJAX call when a specific input related to the workload changes. The AJAX script is responsible for calculating disabled dates o ...
My current project uses Ionic, but I'm encountering an error related to missing dependencies for "@fullcalendar/angular" when running ionic serve. Error: [ng] ERROR in The target entry-point "@fullcalendar/angular" has some missing dependencies ...
I am currently utilizing the angular full calendar day grid plugin. The format of my json data is as follows: [ {“id”:2,“start_time”:“2019-08-15 16:52:00”}, {“id”:3, “start_time”:“2019-09-23 18:55:00”} ] Unfortunately, angular f ...
Unfortunately, the moment().add() function is not functioning properly in my JavaScript code. var theDate = moment(event.start.format("YYYY-MM-DD HH:mm")); //start Date of event var checkquarter = theDate.add(30, 'minutes'); var plus = 30; if ...
Here's how I'm integrating event information from my database with FullCalendar using PHP: Retrieve event information from the database. Organize the data into an array and customize formatting, colors, etc. Convert the array to JSON format usi ...
Issue: I am facing a challenge in customizing my Full calendar view. Objective: My goal is to set the default view to month. While I have achieved this using JQuery, I am curious about how to accomplish the same with Vue-js. My Investigation: My JQuer ...
I am currently using Angular 10 along with FullCalendar version 5.3.1., and I am facing an issue where I cannot set the initial view of FullCalendar to day view. It seems to be stuck on the dayGridMonth view by default. Below is the HTML snippet: <full ...
Here is the code for my calendar: <script> $(document).ready(function() { var events = <?php echo json_encode($data) ?>; $('#calendar').fullCalendar({ header: { left: 'prev,next', center: &apos ...