The dayRender function in FullCalendar does not include the cell property definition

Utilizing the fullcalendar.io plugin, I am trying to inject additional HTML into each cell of the calendar. However, when I check the console, I encounter the following error message:

Uncaught TypeError: Cannot read property 'append' of undefined
at Calendar.dayRender (mycode.js?v=1.x:31)
at Calendar.publiclyTrigger (main.js?v=1.x:6949)
at DayGrid.DateComponent.publiclyTrigger (main.js?v=1.x:4008)
at DayGrid._renderCells (main.js?v=1.x:796)
at DayGrid.res [as renderCells] (main.js?v=1.x:3189)
at DayGrid.render (main.js?v=1.x:740)
at DayGrid.Component.receiveProps (main.js?v=1.x:3887)
at SimpleDayGrid.render (main.js?v=1.x:1520)
at SimpleDayGrid.Component.receiveProps (main.js?v=1.x:3887)
at DayGridView.render (main.js?v=1.x:1586)

var calendarEl = document.getElementById('calendar');

      var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid', 'timeGrid', 'list' ],
        defaultView: 'dayGridMonth',//'timeGridWeek',
        header: {
          left: 'prevYear,prev,next,nextYear today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        defaultDate: '2019-07-12',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        dayRender: function(date, element) {
          element.append("<input type=\"checkbox\">AM<br>");
        }

      });

I suspect that the issue lies in the fact that the dayRender function fails to define the elemement variable properly. What might be causing this problem?

javascriptfullcalendarundefinedfullcalendar-4

Answer №1

If you're working with Full Calendar version 4.0, follow this suggestion from ADyson and use the dayRender function like this:

dayRender: function (dayInfo) {
   dayInfo.el.innerHTML = "<input type=\"checkbox\">AM<br>";
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust dimensions of an image retrieved from a URL

Is there a way to adjust the size of the image displayed here?: var picture = new Image(); picture.src = 'http://www.example.com/images/logo.png'; picture.width = 200; //trying to change the width of the image $('canvas').css({ ...

javascriptjqueryhtmlcss

Building a class structure with a JavaScript MVC approach - best practices

I am looking to develop a JavaScript web application using the MVC-like principle. While my code is functional, I am facing challenges in implementing it correctly. I have created a global variable called APP where I store controllers, views, and other com ...

javascript

Combine React 17 with webpack 5 and babel-plugin-react-css-modules, enabling the use of CSS modules with stylename functionality

I am in the process of setting up a new React application using the latest technologies available, including React 17, Webpack 5, and other essential modules. My goal is to implement CSS modules utilizing the styleName concept with the help of babel-plugi ...

javascriptcssreactjswebpack

Issues have arisen with the @keydown.ctrl and @keyup.ctrl event modifiers in Vue.js, as they are not properly responding

I have a project in VueJS where I need to implement a custom context menu that will pop up when the user hovers over specific elements on the page. This context menu is dynamic, meaning it changes as the user moves between different items. If the user hold ...

javascripthtmlvue.jsvuejs2

The Axios patch method encounters an issue where the baseURL is not retrieved

I have encountered a problem while trying to update the base URL in my Axios patch request. Despite specifying the new baseURL in the stageReceiver method, it continues to use the default baseURL (which is set when running npm serve). import axios from &q ...

javascriptvue.jsaxiospatch

A step-by-step guide to implementing lodash once in Vuejs

I am faced with the following input scenario. <input type="text" maxlength="50" v-on:input="query = $event.target.value" v-on:keyup.enter="once(search)" /> Additionally, there are ...

javascriptvue.jslodash

Using the HttpPut method in conjunction with a route controller

Hey there, I could really use some assistance. I'm currently attempting to utilize the PUT Method via AJAX in order to send data to a controller for an update operation. Here's my JavaScript and AJAX code: function UpdateProduct() { var id = loc ...

javascriptc#.netajaxasp.net-mvc

From creating a simple jQuery fiddle, let's delve into the world

Here is a code snippet I'm trying to transition from jQuery to an Angular directive. Visit this link to view the original code: http://jsfiddle.net/rhtr1w04/ Below is my implementation in app.js: angular.module('app',[]).directive('an ...

javascriptjqueryangularjshighchartsangularjs-directive

What are the important steps to properly map data prior to subscribing?

I'm working on a function that looks like this: this.localStorage.getItem('user').subscribe(user => { this.user = user; this.authSrv.getOrders(this.user.einsender).pipe(map(orders => { map(order => { order[&q ...

javascriptangulartypescriptrxjsobservable

Incorporate a variable into a string

My task here is to prepend a variable before each specific string in the given text. For example: var exampleString = "blabla:test abcde 123test:123"; var formattedString = "el.blabla:test abcde el.123test:123"; In this case, whenever there is a pattern ...

javascriptregex

Showcase fullcalendar events that span across multiple rows and columns

Within my Angular application, I am utilizing the Angular UI Calendar in conjunction with Fullcalendar to display user events. Currently, when a user interacts with an event by clicking on it, only a portion of the event is highlighted. This becomes probl ...

javascriptjqueryangularjsfullcalendarui-calendar

The bootpag event seems to trigger multiple times upon execution following an Ajax function call

I have integrated the bootpag jQuery pagination plugin from bootpag into my .NET/jQuery project. Within my project, there is a filtering menu that triggers an Ajax call to update the page with filtered or paginated data when a user selects a filtering opti ...

javascriptjqueryajaxpagination

Hierarchical Navigation Panels

I am currently facing a challenge with designing a highly intricate navigation menu. The menu is structured in 3 levels with 2 parent tabs. Upon hovering over any tab, the user should be able to view its corresponding child navigation levels, and when not ...

javascriptjquerytabsnavigation

Parent Directory Injector: Prioritizing Injection of Parent Directories

Currently, I am utilizing 'grunt-injector' to inject a list of files using 'app/**/*.js'. However, I am facing dependency errors due to the alphabetical order in which the files are injected. To avoid these issues, I am looking for a so ...

javascriptnode.jsgruntjsfilesystems

Having issues with the right margin in HTML5 canvas and struggling to remove the scroll bar

I am struggling with adjusting the margins of my canvas to ensure equal spacing on both sides without any horizontal scroll bars. Desired Outcome: Equal margin on both sides of canvas without any horizontal scroll bars. Issue: The margin-right property i ...

javascriptcsshtmlcanvas

JQuery / AJAX: Access to External Request Denied

I am running a script that fetches data from a local PHP file. Here is the simplified version of the script: $(document).ready(function(){ var current_date = "x=y"; $.ajax ({ url: 'work/get_cal.php', type: 'post', ...

javascriptphpjqueryajax

Loading content dynamically into a div from an external or internal source can greatly enhance user experience on a website. By

As I work on my website, I am incorporating a div structure as shown below: <div class="container"> <div class="one-third column"> <a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a> </div> & ...

javascriptjquerycsshtml

Seemingly the Tailwind Styles are failing to take effect in my Next.js Project

While following a Next.js tutorial project, I ran into an issue where my project seemed to be way off. It appeared that the tailwind styles were not being applied for some reason, even after tweaking the 'tailwind.config.js' file without success. ...

javascriptreactjsnext.jstailwind-css

${IDHERE} element's text color not changing when tab is switched

One dilemma I encountered involves displaying a percentage on a webpage with 2 tabs. The percentage is originally shown on the tab that is open when the page loads. The JavaScript code I used is quite straightforward: adaPercentColor(percent, ada) { ...

javascripthtmlcssangular

Having trouble with RethinkDB filter not returning any matches?

Encountering an obstacle with RethinkDB while using NodeJS. Attempting to utilize a basic .filter() function, but for some mysterious reason, it fails to retrieve a result. The current code snippet in question looks like this: const someID = 1234; ...

javascriptnode.jsrethinkdb