Showing scheduled activities from a database on an AngularJS mwl calendar

How can I modify my code to display events from a database on an mwl calendar based on the saved date rather than showing all events for today only? I want to show events based on the notifyDate field in the database. Can someone help me with this?

html

    <mwl-calendar
    events="events"
    view="calendarView"
    current-day="viewDate"
    view-title="calendarTitle"
    ng-model="eventSources"
    cell-is-open="cellIsOpen"
    day-view-start="06:00"
    day-view-end="22:59"
    day-view-split="30"
    cell-modifier="modifyCell(calendarCell)"
    cell-auto-open-disabled="true"
    on-timespan-click="timespanClicked(calendarDate)">
    </mwl-calendar>

controller

    $scope.myevents = function(start, end, timezone, callback) {
    SalesNotifyService.getAllNotify().success(function(data) {
    $scope.events = [];
    angular.forEach(data,function(event,key){
    $scope.events.push({
      employeeName: event.employeeName,
      notifyDate: event.notifyDate,
      });
      });
      callback($scope.events);
      });
      }
      $scope.eventSources = [$scope.events,$scope.myevents];

I am looking for assistance on how to update my code so that the events displayed on the calendar are based on the notifyDate stored in the database rather than being limited to today's date.

Answer №1

Ensure that every event object includes the following properties:

  • title
  • startsAt
  • color

It is recommended to create your objects with these properties in mind

SalesNotifyService.getAllNotify().success(function(data) {
    $scope.events = [];
    angular.forEach(data,function(event,key){
        $scope.events.push({
            title: event.employeeName,
            startsAt: event.notifyDate, // must be a javascript date object
            color: {
                primary: '#e3bc08',
                secondary: '#fdf1ba'
            },
        });
    });
}

For more information, refer to the documentation.

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

Mastering Meteor: Techniques for Manipulating Mongodb Data in Real Time Display

Within my Meteor application, I have accomplished the successful publication of data from the server and its subscription on the client side. Instead of directly displaying raw data on the client's screen, I am interested in performing some calculatio ...

Adjusting the speed of Flexslider with mousewheel control

I am looking to implement flexslider with mousewheel functionality. Here is an example of how I want it to work: $('#slider').flexslider({ animation: "slide", mousewheel: true, direction: "vertical", ...

JavaScript, XML, and PHP all support the use of HTML entities within their code

Having some trouble as a newbie again))) Can you please help me out, guys? I'm having an XML file with the following data: <Page> <Content>&lt;p&gt;Article content&lt;/p&gt;&#13; &#13; &lt;h1 style="font-style ...

Troubles encountered with the search bar filter functionality, implementing JS/JQuery within a Laravel blade template

Currently, I have a blade template containing a search bar for filtering purposes. The issue I'm encountering is that the filtering functionality doesn't seem to work as expected after removing Angular from the page entirely. The page is set up ...

Guide on retrieving an ArrayList() from intricate function in Angular

Simplicity is the key to my question. Let's take a look at this Angular method: getAllOrdersHeaders(){ this.getAllOrdersIds().subscribe(idList=>{ idList.forEach(id=>{ this.ordersCollection.doc(id).collection('metadata&apo ...

Troubleshooting: Issue with Chrome's CSV Export Functionality in JavaScript/AngularJS

Currently, I am troubleshooting an issue with exporting a CSV file from a data table on a web application. The export functionality works fine on all browsers except for Chrome when the export button is clicked. I have been trying to solve this problem for ...

How can I prevent duplicate IDs when submitting a form through AJAX within a while loop?

While submitting a form using Ajax within a while loop, I encountered an issue where the same form ID is being used multiple times due to the loop. As a result, the form only submits once. I believe that I need to generate a unique ID for each iteration of ...

"Hidden panels in Sencha Touch only respond to show() and hide() methods after a resize event

Check out this demonstration of a Sencha Touch app by visiting this link. The button located in the bottom-left corner is supposed to show or hide the menu panel on top of the "Location info goes here" bar, but it seems to be functioning in an unexpected m ...

JavaScript debugging causing system freeze

Currently, I am working on a project that involves using MVC and dropdown lists. My issue arises when the dropdown list changes, as there is some javascript code that needs to execute. To troubleshoot the problem of the system locking up every time I tried ...

Develop a JavaScript library for use in the npm ecosystem

I have developed a minimalist JavaScript library that includes common functions: !!window.JsUtils || (window.JsUtils = {}); JsUtils = (function () { "use strict"; return { randomHex: function (len) { var maxlen = 8; ...

Effortless method of organizing information like scores

I have developed a multiplayer game that will be played on a server, and I need to save the high scores of the players. These stored scores should be consistently available and easily accessible for all players at any time. Can anyone suggest a good appro ...

Retrieving user email with Vue.js from Firebase

Currently, I am in the process of developing a chat application using Vue.js and Firebase. This project has been quite challenging for me as I am new to both Vue and Firebase. One specific issue I have encountered is trying to retrieve the user's ema ...

Identify erroneous or incomplete JSON data when making an AngularJS $http.post() request

After reviewing the source code of AngularJS, it is evident that any $http.post request returning an HTTP status code in the 200-299 range will trigger the success() callback, even if the response contains invalid data such as malformed JSON. Despite sett ...

Is the contenteditable feature working properly when updating PHP, SQL, and AJAX in the network?

Struggling with updating modified text to SQL using PHP and Ajax. Unsure if the issue lies in the data sent through Ajax or a problem within the PHP script. Below is my snippet from the HTML file: <tr> <td class="editingTab" contenteditable=&ap ...

Acquiring the asset within the controller

Having trouble accessing my service within the controller. This project was generated with the latest yeoman which handles template creation and file merging during build. Whenever I make changes, Angular stops working without displaying any errors in the ...

There was an issue with the NextJS axios request as it returned a status code

I'm currently in the process of developing an application with NextJS and Strapi In my project, I am fetching data from Strapi using Axios within NextJS Next: 14.0.4 Axios: ^1.6.5 Strapi: 4.17.1 Node: 18.17.0 Here is the code snippet: import axios f ...

The repeated execution of a Switch Statement

Once again, I find myself facing a puzzling problem... Despite making progress in my game, revisiting one aspect reveals a quirk. There's a check to verify if the player possesses potions, and if so, attempts to use it involves calculating whether the ...

Inject fresh variable values into the serialization process

Within my login form, I have fields for Username and Password. Upon clicking the login button, a Javascript function is triggered to make an ajax request to the login controller. To serialize the form data, I used the code snippet below: var parameters = ...

Error: The function nodemailer.createTransport is not defined or does not exist

I'm currently working on integrating nodemailer into my nodejs application for sending emails. Check out the code below: var express = require('express'); var nodemailer = require('node-mailer'); var app = express(); app.post(&a ...

Display conceal class following successful ajax response

Upon clicking the button, the following script is executed: $.ajax({ url: "<?php echo CHILD_URL; ?>/takeaway-orders.php", type: 'POST', async:false, data: 'uniq='+encodeURIComponent(uniq)+'&menu_id=' ...