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

Guide to waiting for API responses with redux-saga

I have a React-Typescript app with backend calls using React Saga. I'm facing an issue where when one of my frontend functions makes a backend call, the next function starts executing before the previous one finishes. Currently, I'm using the SE ...

Error: JSON parsing encountered an issue with token "o" at position 1 while making an ajax request

When I try to make an AJAX call, my code is set up like this: var Data = { name : $('input[name=name]').val(), email : $('input[name=email]').val(), phoneno : $('input[nam ...

Leveraging a VueJS prop as a variable in an array mapping operation

Trying to figure out a solution where a variable (prop) can be used in an array map function. The initial code snippet looks like this: var result = this.$store.getters['example/store'].map(a => a.fixed_column) I aim for fixed_column to be ...

When the button is clicked, my goal is to increase the value of the text field by one using JavaScript

I need the functionality for each button to increment the value text field located next to it <input type="number" value="0" min="0" max="5" step="1" id="qty"/> <button onclick="buttonClick()" type="button" class="btn btn-success btn-sm" id="add" ...

Issue with displaying multiple checkboxes using Materialize CSS in combination with Leaflet for web-mapping overlays

I'm currently using Materialize 0.97.7 along with Leaflet 1.0.1 (the latest version). <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet-src.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com ...

Node.js: How to handle spaces when running a UNIX command

Currently, I am utilizing the following command to compress files in node.js: var command = '7z a ' + dest + ' ' + orig; exec( command, function(err, stdout, stderr) { ...}); An issue arises when a file containing spaces is involved, ...

Send the form data from a modal controller in AngularJS to an ng-controller outside of the modal

There seems to be a confusion with the functionality not working as expected: In my Angular application, I have a main page with an ng-controller named "SearchCtrl" that handles sending search requests to a webserver. app.controller('SearchCtrl&apos ...

Discover the best practices for incorporating $scope in your $http URL

After logging the correct id, I aim to use this id in the second URL to fetch data accordingly. For example, when the id is 9, using url: &room_type=9&day=1 works fine. However, it doesn't work as expected when I try to use it like this url: ...

What is the process of enabling scrolling on the main panel once scrolling on the sidebar has concluded?

How can I achieve a scrolling behavior similar to the one demonstrated here? When scrolling through the sidebar, I want it to continue scrolling until it reaches the end. After that, any further scrolling on the sidebar should scroll the main panel inste ...

When working in Javascript, make sure to replace newline and carriage return characters in strings with empty spaces. Also, don't forget to replace the literal sequences and

When working with Javascript, I am looking to perform multiple string replacements as outlined below. Remove all newlines and carriage returns Swap out instances of \n with a newline character Change occurrences of \r with a carriage return char ...

A guide on implementing multiple ternary operators in a Vue.js template

Is it possible for a template to return three different values instead of just two, based on the data? I am familiar with using two conditions, but is there a way to use more than two without getting a syntax error? <option {{ change === 1 ? &apos ...

What is the significance of the "component" prop within MUI components?

I am a beginner in React and HTML. Currently, I am using MUI and React to create my own website. I am currently attempting to add an "Upload button" that will allow me to select an image file when clicked. Below is the official implementation: <Button ...

Looking to pass multiple props and run a function for each one? Here's how!

There is a scenario where I have two separate times in minutes format that need to be converted to 24-hour format without separators. I am currently using a function for this conversion and then using momentjs to transform it into the required format. Whil ...

What is the process for resizing a texture render target following a window resize event?

My intention was to improve the texture quality, but instead of achieving my goal, I encountered an issue where the same texture is being stretched over a larger area, resulting in unwanted staircase artifacts. I tried updating various elements like camera ...

Finding distinct outcomes from an already screened roster using AngularJS

I have an array containing objects structured like this: { "date":"11/11/2014", "time":"17.20.37", "car":"396", "driver":"Jenny", "from":"Old Office", "destination":"Log WH", "pax":"3","comment":"", "commenttime":"", "arrival":"17.20.48", "inserted":true, ...

The functionality of cloning in jQuery may encounter an issue where the text field remains enabled if the user selects an option labeled "other

Currently, I am working on a jQuery clone with my existing code and everything is functioning well. In the first scenario, if the user selects other from the dropdown menu, the text field becomes enabled. In the second scenario, when the user clicks ...

I am attempting to display text in the input box on the console, but unfortunately, I am not seeing any changes in the console when typing

I have this code, but I am not getting any output when I run it: import { restaurantList } from "../config"; import { RestrauntCard } from "./Restraunt"; const Body = () => { const searchText = "KFC"; return ( <& ...

The NodeJS server experiences a crash immediately after attempting to save data into the MongoDB database

I have encountered an issue with a script that saves objects to a MongoDB database using mongoose. The object is successfully saved to the database, but immediately after, the server crashes and throws the error message: catch(err) { process.nextTick(funct ...

Unexpected fragments returned by Woocommerce during woocommerce_add_to_cart_fragments hook

I'm currently working on a unique customization for my WooCommerce cart where I am trying to update the quantity of a cart item dynamically. Although the updating functionality works correctly, I'm facing an issue where the cart doesn't refr ...

I want to hide jqvmap when viewing on mobile devices

I'm currently working on my website at . I have a template that I'm using as a guide, but I want to make the map disappear on mobile view and replace it with a dropdown list. Can anyone suggest what code I should use for this? Appreciate any hel ...