Template for event cell details in Angular2 calendar view

Currently utilizing [angular-calendar] from

github.com/mattlewis92/angular-calendar

.
My goal is to incorporate my own template as a detailed view for events.
I am aiming to achieve a similar effect as shown in the image: final effect
So far, I have only managed to use custom formatting tags that return strings. However, when I input some HTML input tags, they seem to disappear after running in the dom.
Here is my plunker if you would like to take a look or if you have any ideas on how to resolve this issue.

Thank you in advance.

javascriptangulartemplatestypescriptcalendar

Answer №1

Angular ensures the security of untrusted values when dealing with HTML. To display user input, it is recommended to utilize DomSanitizer.

import { DomSanitizer} from '@angular/platform-browser';

@Injectable()
export class CustomEventTitleFormatter extends CalendarEventTitleFormatter {
  constructor(@Inject(LOCALE_ID) private locale: string, private sanitizer: DomSanitizer) {
    super();
  }

  month(event: CalendarEvent): any {
    return this.sanitizer.bypassSecurityTrustHtml(`<form>
          First name: <input type="text" name="fname"><br>
                      <input type="submit" value="Submit">
              </form>`)
  }
  ...

Check out the Plunker Example

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

The Protractor Custom Locator is experiencing difficulty in finding the element

For our project, the automation team is incorporating a custom attribute called 'lid' to elements where unique identification is challenging. A new custom locator method has been developed to find elements using the 'lid' attribute: ...

javascriptselenium-webdriverprotractor

What could be causing my vis.js network's node hover popups to not function properly?

I've encountered an issue where, despite adding the 'title' property to my node objects, the pop up window with the title content doesn't appear when I hover over a node. Here are the options I've chosen and how I've set up m ...

javascriptnode.jstypescriptvis.jsvis.js-network

Getting an image using a NodeJS server and Angular frontend: A step-by-step guide

I'm having an issue with displaying images from the server on the frontend. The routes seem to be failing. When I register a user, I save their image on the server using Multer, and store the image path in the database. However, when trying to displ ...

htmlnode.jsangularjsangularmulter

Angular request: HTTP request<any> is not generic

Struggling with creating an error interceptor service in Angular. Having trouble instantiating a HttpRequest. New to Angular and Web App development. Here is my code snippet: import { Injectable } from '@angular/core'; import { HttpInterceptor ...

angularhttprequest

Developing a unique TypeScript singleton pattern tailored for multiple PouchDB instances

I have developed a node application that interfaces with multiple databases. I've designed a class which allows me to create various databases effortlessly, as they share similar CRUD operations. The Class: class DatabaseService { private dbName: ...

node.jstypescriptpouchdb

Adapt the stylesheet for mobile devices using CSS

I am struggling with updating file paths in CSS depending on whether the end user is accessing my site from a PC or mobile device. Below is my CSS code, where I attempted to redirect users if they are on a handheld device: <link rel="stylesheet" type=" ...

javascriptjqueryhtmlcssmobile

The issue persists as AJAX data and text box data are not being saved simultaneously

I need assistance with an Ajax setup. I am trying to pass the screenwidth information along with a user input value from a text box to a PHP page. However, I am encountering issues as the only value being passed is from the textbox and the other one is sho ...

javascriptphpsql-serverajax

Send an array and a single string to a PHP script using an Ajax request

I am attempting to incorporate the code snippet below: var flag = new Array(); var name = $("#myselectedset").val(); $.ajax({ type: 'post', cache: false, url: 'moveto.php', data: {&a ...

javascriptajax

Adjust the height of the list when including or excluding floated list items that are not in the final row

Within my ul are li elements with varying widths that wrap around inside a container into multiple rows. When removing an li element from the ul, I want the container's height to adjust dynamically in case a row is eliminated. If the removal happens ...

javascriptjqueryhtmlcss

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

cssangulartypescriptprimengprimeng-turbotable

Is it possible for me to transfer a class attribute to a directive template in AngularJS?

I recently came across this directive in AngularJS: productApp.directive('notification', function($timeout) { return { restrict : 'E', replace : true, scope : { type: "@", message: "@ ...

javascriptangularjs

Modify every audio mixer for Windows

Currently working on developing software for Windows using typescript. Looking to modify the audio being played on Windows by utilizing the mixer for individual applications similar to the built-in Windows audio mixer. Came across a plugin called win-audi ...

javascripttypescriptnpmnpm-package

How can dynamic values be displayed in VueJS?

I'm looking to display dynamic titles based on the number of times a value is added. For example, if a user selects cats and clicks Add, I want the title to show as cats 1. If the user adds it again, then it should be displayed as cats 2, and so on fo ...

javascriptvue.js

How can we ensure that pointer events return the same coordinates as touch events when the viewport is zoomed in?

I attempted to utilize pointer events (such as pointerdown) instead of using a combination of touch events (e.g. touchstart) and mouse events (e.g. mousedown) to determine the input event coordinates. var bodyElement = document.body; bodyElement.addEvent ...

javascripthtmlgoogle-chromemobilepointer-events

What steps should be taken to rectify the issue in the Angular HttpClient concerning the delete method?

(English is not my first language so please forgive me) Hello, I am new to Angular and I am attempting to make an HTTP request that deletes a doctor when a button is clicked. However, I am struggling with what steps I need to take to get my code working pr ...

angularhttpclienthttp-delete

Is it possible to download multiple files using a single ajax call upon success of a click function?

In my file, there are 2 anchor tags with their respective href links. I am triggering both anchor tags at ajax call success. <a id="exportExcelFatturaIcon" href ="${createLink(action: 'downloadExcel', params: [fileName:excelFileName])}" hidde ...

javascriptjqueryajax

Design a four-room apartment layout using three.js technology

My goal is to design a model of an apartment with four rooms. https://i.sstatic.net/3gPpG.jpg To achieve this, I have created a transparent cube to represent one room, but now I am facing challenges in adding the other three sections. https://i.sstatic. ...

javascriptthree.js3d

ASP.NET user control cannot locate hidden field

In an asp.net usercontrol (.ascx) that contains an HTML hidden field, there are some issues to address. <input id="HiddenField1" type="hidden" runat="server" /> When the user control triggers a HTML pop-up window, users input values which are then ...

javascriptasp.nethtml

What could be causing my jQuery to fail when the page first loads?

My script only seems to work when the input changes, but I want it to start working as soon as the page loads and then continue to update when the input changes. Can anyone help me figure out what's wrong with my script? <script src="http://co ...

javascriptjquery

Implementing Angular 4, modifying the display to reflect changes in the latest model

Hey, I'm having some trouble with a component called 'updateUserInfo'. When I call it from a service, the value in the view doesn't change. Can someone assist me with this, please? @Component({ selector: 'app-menu', t ...

angular