Check the Full Calendar to see if any events are scheduled for today

I have a group of users who need to save their availability. Currently, I am utilizing Full Calendar and looking for a way to prevent them from adding the same event multiple times on a single day. My tech stack includes VueJs and all events are stored in the global store. Here's what I've attempted so far:

handleSelect(arg) {
   let index = this.$store.getters.EVENTS.findIndex((_event) => _event.start == arg.start);
   if (index == -1) {
     this.$store.dispatch("ADD_EVENT", {
        id: new Date().getTime(),
        title: this.title,
        start: arg.start,
        end: arg.end,
        allDay: arg.allDay,
     });
   }
},

Despite both _event.start and arg.start showing as the same value when logged to the console, the index is always returning -1. Can anyone shed some light on why this might be happening?

Answer №1

Resolved: I realized that event.start is an object, so I needed to use getTime to compare dates. Here's my updated code snippet:

handleSelect(arg) {
  let foundIndex = this.$store.getters.EVENTS.find(
    _event =>
      _event.start.getTime() == arg.start.getTime() &&
      _event.end.getTime() == arg.end.getTime()
  );

  if (!foundIndex) {
    this.$store.dispatch("ADD_EVENT", {
      id: new Date().getTime(),
      title: this.title,
      start: arg.start,
      end: arg.end,
      allDay: arg.allDay
    });
  }
},

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

Exploring ways to enhance Bootstrap Navigation by adding extra link options. Seeking a resolution using jQuery

Are you looking for a solution to handle site navigation with a larger number of links? When more links are added, they display in multiple lines which might not be the desired layout. You can view an example of this issue in the attached image: See here a ...

The Problem of Restoring Column Height in Tabulator 4.6.3 Filters

The Issue After activating and deactivating header filters, the column height does not return to its original state. Is this the expected behavior? Is there a way to reset the column height? Check out this JS Fiddle example: https://jsfiddle.net/birukt ...

Encountering challenges with integrating GraphQL and the Magic API. Seeking guidance on implementing mutations and queries on a server to establish a schema

In my project, I have organized my GraphQL operations into two separate files: mutations.js and queries.js, which are stored in a directory named gql... The gql folder serves as a repository for GraphQL mutations and queries that are utilized throughout t ...

To prevent DOM errors in Vue-bootstrap and Nuxt.js, it is recommended to utilize the <b-dropdown> element within the <b-collapse> component

Here is the code I have for my navigation menu: <b-navbar toggleable="lg" class="navbar navbar-expand-lg navbar-light"> <b-navbar-toggle target="nav-collapse" class="mx-auto my-0"></b-navbar-toggle&g ...

Issue with Alignment of Border in PDF [Example Included]

I am currently developing a straightforward react application with very minimal content. index.js: <div className="App"> <div id="printable-div"> <h1>Generate PDF</h1> <p>Capture a screenshot of ...

What is the method to utilize global mixin methods within a TypeScript Vue component?

I am currently developing a Vue application using TypeScript. I have created a mixin (which can be found in global.mixin.js) and registered it using Vue.mixin() (as shown in main.ts). Content of global.mixin.js: import { mathHttp, engHttp } from '@/ ...

Best Practices for Implementing AngularJS Dependency Injection

I am excited to share that I have recently started delving into my very first Angular JS project. As I navigate through this new experience, I want to ensure that I am effectively managing Multiple dependency injection. Any insights, recommendations, or ...

Changing the color of a highlighted face on a PlaneGeometry in ThreeJS

I am trying to figure out how to change the color of a specific face when hovering over it in my PlaneGeometry, but I am having trouble getting the selected face. Below is the code I have so far: //THREE.WebGLRenderer 69 // Creating a plane var geometr ...

Using JavaScript's `Map` function instead of a traditional `for`

My dataset consists of a csv file containing 5000 rows, with each row having thirty fields representing measurements of different chemical elements. I aim to parse and visualize this data using D3js. Upon reading the file, I obtain an array of length 5000 ...

Rearrange the sequence of numbers using JQuery when an HTML element is deleted

I'm currently working on a simple functionality where I have 5 rows, each with its own number. So initially, the rows are numbered from 5 to 1. If I remove a value like 3, the sequence should adjust to 4, 2, 1, indicating that I now have only 4 rows ...

Tips on capturing a URL using JQuery

Currently, I am in the process of importing an external HTML file into my webpage. Within this file, there is a JavaScript method linked to a form submission event. function ValidateInput(){ //some code if(validationFailed){ ...

Utilize Bootstrap tooltips to display live results fetched via an AJAX call

I have a bootstrap tooltip that I am trying to populate with data from an AJAX request. The text retrieved from the request should be displayed as the title property of the tooltip. Despite successfully executing the AJAX request, I am facing two issues: ...

VueJS: The function scope.notifications is not defined

I created a new method in Vue.js 1.0.21 and encountered an error while trying to utilize it. Since I am using the CLI version, the syntax is slightly different from what I usually work with. Error TypeError: scope.notifications is not a function. (In &ap ...

Receiving JSON information from a web address using Javascript

I'm currently faced with a challenge in extracting JSON data from a web server. Despite the absence of errors in my code, I encounter difficulties displaying any output. Below is a snippet of the issue: <!DOCTYPE HTML> <html> <head ...

iPhone - touchstart event not functioning in JavaScript

Looking for a solution to dynamically resize a div in JavaScript when clicking on a link element (<a>). However, the code doesn't seem to function properly on my iPhone. Let's start with a basic link: <a href="#" onfocus="menu()">ME ...

What is the best way to create nested inline template components?

In my web application, I have an <overview> component that stores all contact information in a prop. When displaying the contacts, I loop through them within the overview and create table rows to showcase each one individually. However, for specifi ...

What could be the reason for the sudden failure of my jQuery + AJAX functionality?

As a novice in JavaScript/jQuery/AJAX, I have a suspicion that the issue lies in some typo that I may have overlooked. Everything was working perfectly, but when I made some edits, the hide() + show() methods stopped functioning (I tested it on both Firefo ...

Is it possible to recognize when the mouse button is held down and the cursor is outside the viewport by using mouseleave detection?

Is there a way to detect when a user moves the mouse outside of the view-port, even if they are holding down the mouse button (for example, if the mouse is on the browser address bar)? In the code below, I am currently using mouseout and mouseleave to det ...

I'm having trouble getting the app.locals function within a button to work on my EJS template. Can anyone help troub

Below is the content of my script named agents.js: var express = require('express'); var router = express.Router(); var app = express(); // Is it appropriate to call Express like this twice? router.get('/', function(req, res, next) { ...

Understanding the impact of event loop blocking and the power of asynchronous programming in Node JS

I am new to Node.js programming and I really want to grasp the core concepts and best practices thoroughly. From what I understand, Node.js has non-blocking I/O which allows disk and other operations to run asynchronously while JavaScript runs in a single ...