"View your daily schedule in half hour intervals with the Angular calendar feature

I am currently utilizing the Angular calendar, which can be viewed at . My objective is to divide the hour into half-hour segments.

Following the information provided here: https://github.com/mattlewis92/angular-calendar/issues/287

I have implemented the following code in styles.scss:

.cal-day-view .cal-hour-segment.cal-after-hour-start .cal-time {
  display: block;
}

However, the code is not functioning as expected, resulting in:

https://i.sstatic.net/mD2Wl.png

Each segment is displaying the same hour, such as 07, 08, etc. Is there a specific setting that I may have overlooked?

Could someone provide assistance?

Below is my HTML code:

 <mwl-calendar-day-view
          [viewDate]="viewDate"
          [events]="eventsArray[i]"
          [refresh]="refresh"
          [hourSegmentTemplate]="dayHourSegmentTemplate"
          [dayStartHour]="07"
          [dayStartMinute]="00"
          [dayEndHour]="22"
          [dayEndMinute]="00"
          (eventClicked)="eventClicked($event)"
          (dayClicked)="dayClicked($event)"
          (hourSegmentClicked)="hourSegmentGetClicked($event.date)"
          [eventTemplate]="eventTemplate"
          [eventTitleTemplate]="customDayTemplate"
          [hourSegments]="4"
        >
        </mwl-calendar-day-view>
angulartypescriptangular-calendar

Answer №1

I managed to solve the issue

Inserted in the app.module.ts file

class CustomDateFormatter extends CalendarNativeDateFormatter {
  public dayViewHour({ date, locale }: DateFormatterParams): string {
    return new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: 'numeric' }).format(date);
  }
}

then added into providers

{ provide: CalendarDateFormatter, useClass: CustomDateFormatter }

and it started working

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

Obtaining parameter types for functions from deeply nested types

I'm currently facing a challenge involving deeply nested parameters. When dealing with non-nested parameters, everything functions smoothly without any issues export type test = { 'fnc1': () => void, 'fnc2': () => void, ...

typescript

Personalization of settings in material dialog

In my project, I am utilizing Angular and Material to create a seamless user experience. A key functionality I have implemented is the use of Angular Material dialogs across multiple screens. However, I am now faced with the challenge of needing to add a s ...

angularangular-material

Getting the Class name in Typescript

How can you retrieve the class name from within a Class in typescript? For instance, consider this code snippet: export class SomeRandomName extends AbstractSomething<SomeType> implements OnDestroy { className = 'SomeRandomName'; Is th ...

angulartypescriptclassclassname

What is preventing the spread type from being applied to `Record` in TypeScript?

export type AddResourceProps<K extends string, T extends any> = (resource: BasicResource) => Record<K, T> const addtionalResourse = addResourceProps ? addResourceProps(resource) : {} as Record<K,T> const result = { ...addtionalRe ...

reactjstypescriptredux

Updating reactive form fields with setValue or patchValue does not result in the fields being refreshed

This is a simplified version of my code snippet: ngOnInit() { //initialize form fields this.form = this.builder.group({ name: '', age: '', location: '', }); //Calling the service this. ...

angulartypescriptangular6angular-reactive-forms

Is there a way to create a list of languages spoken using Angular?

I am in search of a solution to create a <select> that contains all the language names from around the world. The challenge is, I need this list to be available in multiple languages as well. Currently, I am working with Angular 8 and ngx-translate, ...

javascriptangular

How come TypeScript remains silent when it comes to interface violations caused by Object.create?

type Foo = { x: number; }; function g(): Foo { return {}; // Fails type-check // Property 'x' is missing in type '{}' but required in type 'Foo'. } function f(): Foo { return Object.create({}); // Passes! } functio ...

javascripttypescriptprototype-chain

Learn how to generate specific error messages based on the field that caused the failure of the @Column({ unique: true }) Decorator. Error code 23505

Hey there! I'm currently facing an issue while trying to handle Sign Up exceptions in my code. I want to inform the user if their username OR email is already in use. Although using the decorator @Column({ unique: true}) allows me to catch error 23505 ...

typescriptpostgresqlerror-handlingnestjstypeorm

What exactly is the purpose of the colon in JavaScript's import statement?

Looking at the following example. import { QueryClientContract, TransactionClientContract } from '@ioc:Adonis/Lucid/Database' I am puzzled by the use of colons and I am unsure about where the imported files are being referenced from. ...

javascriptnode.jstypescriptes6-modulesadonis.js

The declared type 'never[]' cannot be assigned to type 'never'. This issue is identified as TS2322 when attempting to pass the value of ContextProvider using the createContext Hook

I'm encountering an issue trying to assign the state and setState to the value parameter of ContextProvider Here's the code snippet:- import React, { useState, createContext } from 'react'; import { makeStyles } from '@material-ui ...

reactjstypescriptreact-hooksreact-state-managementcreatecontext

Move the vertex onto the mxGraph canvas using drag-and-drop functionality

Hey there, I'm currently working on dragging and dropping a vertex from the create button onto the mxGraph canvas, similar to how it's done in draw.io. This is what my TS code looks like: addShape(shape: string,event) { event.stopPropagation(); ...

angularmxgraph

IntelliJ IDEA does not support the recognition of HTML tags and directives

I seem to have lost the ability to switch between my HTML and TS files in Intellij IDEA; the tags, directives, and autocompletion in HTML are no longer working. Additionally, I'm receiving some warnings: https://i.stack.imgur.com/QjmNk.png Is there ...

angulartypescriptintellij-idea

Module not found when attempting to import a newly created TypeScript module

A fresh Typescript project called puppeteer-jquery has just been released on the NPM registry. The code is functioning perfectly well. However, when attempting to integrate it into another project: npm install puppeteer-jquery and trying to import it lik ...

node.jstypescriptnpmtypescript-typings

Implementing an Asynchronous Limited Queue in JavaScript/TypeScript with async/await

Trying to grasp the concept of async/await, I am faced with the following code snippet: class AsyncQueue<T> { queue = Array<T>() maxSize = 1 async enqueue(x: T) { if (this.queue.length > this.maxSize) { // B ...

javascripttypescriptasynchronousasync-await

Displaying data from ngOnInit in Angular 4 HTML

I am struggling with passing response data from ngOnInit function in my .ts class to the associated html file. ngOnInit() { //some code }.then(response => { console.log(response.data.reports[0].reportStatus); //some other code }) ...

angular

Implementing Generic Redux Actions in Typescript with Iterable Types

Resolved: I made a mistake by trying to deconstruct an object in Object.assign instead of just passing the object. Thanks to the assistance from @Eldar and @Akxe, I was able to see my error in the comments. Issue: I'm facing a problem with creating a ...

reactjstypescriptredux

Having trouble with TypeScript error in React with Material-UI when trying to set up tabs?

I have developed my own custom accordion component hook, but I am encountering the following error export default const Tabs: OverridableComponent<TabsTypeMap<{}, ExtendButtonBase<ButtonBaseTypeMap<{}, "button">>>> Check ...

javascriptreactjstypescriptreact-hooksmaterial-ui

How can you position the input cursor at the end of the default text when navigating through fields with the tab key?

I've implemented tab index in the HTML to navigate from one field to another. In the image below, you can see me tabbing from "Revise" to "Link". https://i.stack.imgur.com/vb6L.png However, when I press tab, the default text in the Link field is fu ...

angular

RxJS: the art of triggering and handling errors

This is more of a syntax question rather than a bug I'm facing. The process is straightforward: Send an HTTP request that returns a boolean value If the boolean is true, proceed If the boolean is false, log a warning and stop the flow. To handle ...

angulartypescriptrxjsrxjs-pipeable-operators

Adding an item into a list with TypeScript is as simple as inserting it in the correct

I am working with a list and want to insert something between items. I found a way to do it using the reduce method in JavaScript: const arr = [1, 2, 3]; arr.reduce((all, cur) => [ ...(all instanceof Array ? all : [all]), 0, cur ]) During the fir ...

typescript