We have successfully integrated the Wijemo event calendar with our Angular controller

I've been attempting to connect the wijeval to an array of events within an AngularJS Controller. Here's what I've attempted so far:

View:

<div ng-app="MyApp" ng-controller="MainController">
    <wijevcal viewtype="week" eventsdata="{{events}}">
    </wijevcal>
</div>

Controller:

var app = angular.module("MyApp", ["wijmo"]);
function MainController($scope) {
    $scope.events = [{ id: "ev1", subject: "First event", start: new Date(2013, 5, 23, 15, 30), end: new Date(2013, 5, 23, 17, 35) },
      { id: "ev2", subject: "Second event", start: new Date(2013, 5, 23, 10, 30), end: new Date(2013, 5, 23, 11, 35) }];
}

The eventsdata binding isn't functioning as intended, and any new events created are only stored in the local browser storage. I'm hopeful that someone can assist me in getting the binding to work properly, as the "documentation" I found has been less than helpful.

Link to documentation:

Ceddy

Answer №1

It appears that you are utilizing the WijEvcal widget from Wijmo 3 instead of WjCalendar from Wijmo 5. Below is the accurate code for implementing the WijEvcal widget with AngularJS:

<wij-evcal id="evcal" time-interval="30" style="min-height: 300px" events-data="eventsData" selected-date="selectedDate">
           </wij-evcal>

$scope.eventsData = [{ id: "appt1", subject: "app1", start: new Date(2015, 2, 23, 15, 30), end: new Date(2015, 2, 23, 17, 35) },
                { id: "appt2", subject: "app2", start: new Date(2015, 2, 13, 10, 30), end: new Date(2013, 2, 13, 11, 35) }
            ];
            $scope.selectedDate = new Date(2015, 2, 23);

If you prefer to utilize the Wijmo 5 control, please visit the following link:

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

What could cause the variable "this" in a function within an AngularJS service to be undefined?

Why is the inside function undefined in the AngularJS service? .service('SliceService', function () { var self = this; var Slice = function(intervals, intervalSpan) { self.activeSlice = []; self.hasNext = true; s ...

What is the best way to incorporate an AJAX GET request into an HTML element?

Currently, I am attempting to execute a JavaScript code that will convert all <a></a> elements found within another element <b></b> (the specific name in the HTML) into links that trigger an HTTP get request. However, the code I hav ...

Arranging a list without using the ng-repeat directive

Due to specific constraints, I have opted not to utilize ng-repeat for a list of items. Here is the structure of my list: <p>Search: <input type="text" ng-model="search"></p> <div id="grid" filter-list="search"> &l ...

Navigating around CORS Restrictions

Despite my efforts to understand the CORS policy by reading the MDN documentation and utilizing the code provided on https://www.html5rocks.com/en/tutorials/cors/, I am still encountering an error message while trying to fetch a specific wiki page. The e ...

What are some ways to optimize the efficiency of handling a sizable JSON object in React Native?

I am currently developing an application using React Native and have encountered significant slowdowns during transitions when loading more data. I am exploring alternative app structuring methods to prevent these performance issues, especially as the JSON ...

troubleshooting Axios errors in React applications

User/Project.js: import React, { useState, useEffect } from "react"; import Axios from "axios"; const Project = () => { const [projectName, setprojectName] = useState(""); const [projectDescription, setprojectDescriptio ...

Troubleshooting the non-functional asynchronous function

After starting to use redis with node (specifically the node_redis module), I decided to wrap my retrieval code for debugging and DRY principles. However, I encountered an issue where my new function wasn't working as expected. As someone who is stil ...

How can the hreflang tag be used correctly in a React application that supports multiple languages?

I have a React application with 3 pages(routes) and I support 2 languages (English and Spanish). Should I insert the following code into the <head></head> section of the public\index.html file like this? <link rel="alternate" ...

Add a photo - Django REST framework

I have two models, User and EcoUser, with a one-to-one relationship (I have omitted some fields for simplicity in this example): class User(AbstractUser): picture_url = models.ImageField(upload_to='logos/', blank=True) class EcoUser(models. ...

How can you tell if a specific keyboard key is being pressed along with the CTRL button?

Is there a way to call functions when a specific key is pressed along with the CTRL key (on a Windows system)? While testing for a particular keyCode, I used event.keyCode. I researched the codes assigned to each key and assumed that 17 + 73 would represe ...

Issue with Element Not Displaying During Page Load with Quick AJAX Request

I attempted to display a loading gif while making an ajax request that takes a long time to respond, and then hide the loading gif once the response is received. Here is the code snippet : $('.loading-gif').show(); $ajax({url:'',async ...

Prevented a frame from "https://googleads.g.doubleclick.net" from accessing another frame

After placing ads on my website, they are displaying properly. However, I am receiving an error repeatedly in the console when the page loads: A frame from origin "" is being blocked from accessing a frame with origin "". The requesting frame has an "ht ...

Displaying a marker icon at a specific location on an image using AngularJS based on its x and y coordinates

I'm currently diving into the world of AngularJS and coding. My goal is to display a marker or icon over an image whenever it's clicked. I want this marker icon to appear at the exact (x,y) coordinates where the image was clicked. To see my code ...

ObjectID is failing to store the hexadecimal values properly

Initially, the ObjectID in my Sails/Mongo database was stored like this: "_id" : ObjectId("557077fb836bdee256004232") However, something changed or happened, and now new records are stored differently: "_id" : { "_bsontype" : "ObjectID", "id" : ...

Sharing data between different JavaScript files using Knockout.js

I am working with two JavaScript files named FileA.js and FileB.js. Within FileA.js, there is a function called Reports.CompanySearch.InitGrid: function InitGrid(viewModel, emptyInit) { var columns = [ { name: 'CompanyName', ...

Creating and downloading a Word document with Node.js by utilizing officegen

Recently, I've been trying to utilize the officegen npm module in order to generate a word (docx) file and then download it. Previously, I relied on the tempfile module to create a temporary path for the purpose of downloading. Below is the code snipp ...

What should be triggered when clicking on the cancel button in Bootstrap's modal: `close()` or `dismiss()`?

Bootstrap's modal offers two methods for hiding the dialog: close(result) (Type: function) - Used to close a modal by providing a result. dismiss(reason) (Type: function) - Used to dismiss a modal and provide a reason. Should I use close when the u ...

typescript error caused by NaN

Apologies for the repetitive question, but I am really struggling to find a solution. I am facing an issue with this calculation. The parameters a to g represent the values of my input from the HTML. I need to use these values to calculate a sum. When I tr ...

What is the most effective way to ensure that a child component only executes when a link is clicked on the Vue component?

There are two components in my code The first component, which is the parent component, looks like this : <template> <ul class="list-group"> <li v-for="item in invoices" class="list-group-item"> <div class="ro ...

FadeOut Television static on Canvas after a period of inactivity

Is there a way to smoothly fade out the TV noise after a specific timeout period? I found this code snippet on Stack Overflow that seems to address a similar issue: var canvas = document.getElementById('canvas'), ctx = canvas.getContext( ...