"Enhancing the Today Button in FullCalendar with Custom Functionality

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 the 'today' button - the calendar navigates back to the current week, but the date selection remains unchanged. What I want is for the calendar to not only navigate to the current week but also automatically select today's date on the calendar. However, I am encountering difficulties in redefining the 'today' button click event.

Sample code can be found here: https://plnkr.co/edit/dv9yiq1CdJxfFTsDg4Yx?p=preview

defaultView: 'basicWeek',
            defaultDate: '2016-01-12',
            selectable: true,
            selectHelper: true,
            select: function(start, end) {
              console.log('select');
                var title = prompt('Event Title:');
                var eventData;
                if (title) {
                    eventData = {
                        title: title,
                        start: start,
                        end: end
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, true); 
                }
                $('#calendar').fullCalendar('unselect');
            }

In this scenario, I would like a popup (alert) to appear showing today's date when I click the 'today' button. Essentially, I want the button click event not just to navigate me to the current week but also to auto-select the current day.

Answer №1

If you want to manually trigger today's date selection on the calendar, you can listen for the button click event and then use the select method with the appropriate arguments.

Check out this code snippet: https://example.com/code-snippet

calendar.find('.fc-today-button').click(function(){
  var start = new Date();
  start.setHours(0,0,0,0);
  var end = new Date();
  end.setDate(end.getDate() + 1);
  end.setHours(0,0,0,0);
  calendar.fullCalendar('select', start, end);
});

Answer №2

Give this a shot:

this.eventManager.today()

Alternatively, you can try:

this.scheduler.getCalendar().switchView('resourceTimelineWeek','2022-07-26')

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

Defining Higher Order Components in ReactJS: A comprehensive guide

Trying to wrap my head around Higher Order Components (HOC) in ReactJS with this simple example... I've got three files - First.js, Second.js, and App.js. How should I structure these files so that the computations done in the first file can be acces ...

Is it possible to switch from kilometers to miles on the distance matrix service in Google Maps?

let distanceService = new google.maps.DistanceMatrixService(); distanceService.getDistanceMatrix({ origins: [sourceLocation], destinations: [destinationLocation], travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.IMPERI ...

What is causing my Node JS app to only show the initial JSON object?

Having an issue with my Node application while writing a JSON object and integrating the Twilio API. The console log displays all objects properly, but when written to the document, only the first object is visible. Can anyone help me figure out why this d ...

javascriptif the number is a whole number and evenly divisible

I am currently developing a script that tracks the distance traveled by some dogs in meters. It is basically just a gif running in a loop. What I want to achieve now is to display an image every 50 meters for a duration of 3 seconds. Here's my attempt ...

Unable to refresh JSON data in Datatables

Ensuring this operation is simple, I am following the documentation. An ajax call returns a dataset in JSON format. The table is cleared successfully, but even though data is returned according to the console statement, the table remains empty after the su ...

Ways to extract information from a text

I have a massive string, divided into two parts that follow this pattern: {\"Query\":\"blabla"\",\"Subject\":\"gagaga"}", {\"Query\":\"lalala"\",\"Subject\":\"rarara&bso ...

Transfer the values selected from checkboxes into an HTML input field

I am attempting to capture the values of checkboxes and then insert them into an input field once they have been checked. Using JavaScript, I have managed to show these values in a <span> tag successfully. However, when trying to do the same within a ...

I am looking for solutions to decrease the size of my AngularJS bundle when using Webpack. Can anyone provide

I've been working on developing an AngularJS app (v1.7.x) and I'm facing a challenge with the large production file size. The original dependency in node_module is 1.30 MB and 170 kB (minified). After adding just a basic console.log, the build f ...

Is it possible to use both "npm install --global" and "--save" simultaneously?

I'm curious if it is practical to use both the --global and --save parameters in the npm install command simultaneously. For instance: npm install gulp -g -s From my understanding, since there is no package.json in the npm system folder, I assume th ...

Using Django with Ionic and ng-Cordova for efficient file transfer

Working on an exciting project with an Ionic hybrid app, I've come across a challenge regarding the feature of taking/choosing a picture and uploading it to the server. While there are numerous examples available for using the $cordovaFileTransfer plu ...

The issue with AngularJS ng-show and $timeout functionality not functioning as expected

As a newcomer to AngularJS, I recently started an individual project utilizing ng-show and if else statements with $timeout. Despite my efforts, I have been unable to make the answers timeout after being displayed for a few seconds. I've tried various ...

"Implementing classes with AngularJS: A Step-by-Step Guide

Is there a way to dynamically add a class to the i tag after a button is clicked in AngularJS? <button type="button" title="Like" ng-click="countLikes(product.title)" class="btn btn-compare"> <i class="fa fa-thumbs-o-up"></i> </ ...

Identifying when a system window covers an iframe

After watching a fascinating YouTube video (https://www.youtube.com/watch?v=TzPq5_kCfow), I became intrigued by how certain features demonstrated in the video could be implemented using JavaScript. One specific question that arose for me was how one can d ...

Connecting Formik with the react-phone-number-input library: A step-by-step guide

I am currently working on developing a form using Formik, Material UI, and the React-phone-number-input library for phone number formatting. I have encountered an issue where the formatted phone number is not being inserted into the Formik state, causing F ...

The 'click' event is not triggering after adding elements to the DOM using AJAX

$(".btn-close").on('click', function () { alert('click'); var win = $(this).closest("div.window"); var winID = win.attr("id"); $(win).find("*").each(function () { var timerid = $(this).attr("data-timer-id"); ...

Contrast between Q.defer() and the Promise() function

I am puzzled by the differing behavior of the following code when using Q.defer() as opposed to Promise() Scenario 1 : When Q.defer() is used getDocument(id) .then(function (response) { console.log('in first then') return 'from tw ...

Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb. However, the challenge lies in not knowing how to bring my vision to life. My ulti ...

Flask's JSON data format

When it comes to fetching data from a URL generated with Flask and not by me using AngularJS and Restangular, I seem to be encountering some issues. The JSON data I have is as follows: {"patients": ["{\"_id\": {\"$oid\": \"5677d63 ...

Why is my Cloud Storage Cloud upload file showing a file size of "0 bytes" (Node)?

I am having issues uploading a PDF file to Google Cloud Storage as the file size appears to be 0 bytes. I have been trying to resolve this for the past 3 days but have not received any response. Here is the code snippet that I am using: const cv = req ...

Tally the quantity of data points within jQuery Datatables

Upon navigating to my jQuery DataTable, I aim to showcase the count of Users pending activation. Typically, I would use fnGetData with (this), but since I am not triggering this on a click event and wish to count all entries in the table, I am unsure of ho ...