"Ionic Calendar 2 - The ultimate tool for organizing your

I am using a calendar in my Ionic app that retrieves events from a database through an API.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://portalemme2.com.br/SaoJoseAPI/agenda', true);

this.http.get('http://portalemme2.com.br/SaoJoseAPI/agenda').map(res => res.json()).subscribe(vetor => {
    this.eventos = vetor.eventos;
});

Is there a way to change the date format so it can be displayed correctly on the calendar?

Currently, each event has a date in the format '2018-01-01' and an hour like '01:00:00.0000000' (from the database).

However, the Ionic calendar only accepts dates in the format '2017-12-16 01:00:00'.

I need to convert all the dates before pushing them into the "this.eventos" array.

Answer №1

If you're looking to work with dates in your code, consider using the versatile moment.js library. It's a user-friendly tool that makes date manipulation easy. Simply take the data received from the server and create a Moment object by passing it to the moment() function. Then, utilize the format method to convert the date into the desired Calendar format. To achieve this, provide a format string such as "YYYY-MM-DD HH:MM:SS".

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 methods are available to rapidly test Firebase functions?

While working with Typescript on firebase functions, I have encountered challenges in testing and experimenting with the code. Despite using the Lint plugin to identify errors without running the code, I am struggling to run the code and view the output. ...

How to generate a custom JSON key name in PHP using Laravel

Currently, I am utilizing imagick to extract a number of pages and then store it in JSON format. However, the number is stored as is without any key, for instance - 20. I am seeking a way to store the number with a specific key like below: { "pages": " ...

The error I encountered with the Typescript React <Select> onChange handler type was quite

Having an issue while trying to attach an onChange event handler to a Select component from material-ui: <Select labelId="demo-simple-select-label" id="demo-simple-select" value={values.country} onChange={handleCountryChange} ...

Anticipated request for spy navigation with path '/members' was expected, but unfortunately was not triggered

I am facing an issue with a service method that performs an HTTP delete operation. The expected behavior is that upon successful deletion, the page should be redirected to another location. However, during testing, I noticed that the router navigation func ...

Ways to implement es6 in TypeScript alongside react, webpack, and babel

Being new to front-end development, I have found that following a simple tutorial can quickly help me start tackling problems in this field. One issue I've encountered is with ES5, which lacks some of the tools that are important to me, like key-value ...

What exactly is [index-1] contributing to the solution? Can you explain in simple terms?

As a newcomer to Python, I am currently working on an Exercism exercise. In addition to this being my first time working with matrices, I have been learning a lot over the past couple of weeks. While I am still getting the hang of Classes in Python, the ...

Formatting numbers in Angular 4 to display in Million or Thousand format

I need assistance with formatting numbers in my Angular 4 application. I want to display the number in a certain format based on its value. For example, if the number is 12.23 million, it should be displayed as 12.2M (with one decimal place). If the numbe ...

The issue of the mat-select change event failing to trigger in an Angular 13 reactive form when using the

How to use mat-select within a form-group <mat-form-field appearance="outline"> <mat-select formControlName="formula" id="formula"> <mat-option [value]="metricFormula.TotalCount">{{l(&apos ...

Updating Angular libraries can enhance the performance and functionality of

Within our organization, we rely on several custom Angular libraries for the majority of our projects. The issue arises when we need to update our codebase to a new version of Angular, as it requires updating all libraries simply to ensure compatibility ...

Encountering problem while upgrading Angular Material from version 13 to 14 - error TS2307: Module '@angular/material/core/common-behaviors/constructor' not found

While upgrading Angular and Angular Material from version 13.2.6 to 14.2.2, I encountered the following challenges: Error TS2307: Module '@angular/material/core/common-behaviors/constructor' or its type declarations cannot be found. Error TS2345 ...

Combining Multiple Arrays into a Single Array

Is there a way to combine this merge operation that creates one array using forEach into a single array at the end? affProd.pipe(mergeMap( event1 => { return fireProd.pipe( map(event2 => { const fi ...

Adding innerHTML content to tooltip title using typescript in an Angular project

I have encountered an issue while trying to display HTML content inside a tooltip element's title attribute. The HTML content is not rendering as expected and appears as text instead. Let me outline the structure of my Angular project: library.comp. ...

Angular 2 - Component Loading Screen

I'm looking for a solution for my loading component that shows a spinner and retrieves a remote configuration file necessary for the app to work. Is there a way to have all routes pass through the loading component first to ensure the config data is l ...

How can we declare and showcase a generic object with an unspecified number and names of keys in React using TypeScript?

I am facing a challenge with objects that have a 'comments' field. While all the other fields in these different objects have the same types, the 'comment' field varies. I do not know the exact number or names of the keys that will be p ...

Angular: The fetched data from the API is coming back as undefined

I am trying to use the Highcharts module in Angular to build a chart. The data object needed for the chart is provided by an API, and this is the structure of the object: { "success": true, "activity": [ { &q ...

I encountered TS2300 error stating a duplicate identifier appeared once I transferred my code to Angular CLI

Currently undergoing the process of transitioning our code to Angular CLI for our hybrid app. The plan is to migrate the Angular part to CLI while the AngularJS portion continues to be handled by custom Webpack. It's worth noting that both parts (Angu ...

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

I encountered a problem in my Angular 2 project using TypeScript that I could use some help with. I am making a request to an API and receiving a token successfully. In my response handler, I am checking for errors and displaying them to the user. Oddly en ...

Angular deep linking in an Express server is a powerful combination that allows

I'm developing a single page application using Express and Angular. One feature involves sending users an email with a link to reset their password (https://[domain].com/reset-password/[token]). However, when the user clicks on this link, it redirect ...

How to declare and initialize a variable in Angular 2 using TypeScript

I'm currently working with angular 2 and I'm having trouble understanding how to set a variable. The variable _isLoading is being set in "this.observable.filter((event)" but it doesn't seem to change in the template. This is my TypeScript co ...

Avoid unwanted typeof warnings in TypeScript and WebStorm combination

How can I handle unwanted TypeScript checks related to JavaScript usage in today's development environment? Consider the following function: function connect(config: string): void { // Getting warning for the line that follows: // typeof ...