See also questions close to this topic

• How to get only one question to the preview page in survey management website in angular?

  I am using querystring to h=get the questions on preview page but I am not able to get one question on 1st page and 2nd on another page after clicking next button.

  Querystring

  const queryString = {
        SurveyId: 1,
        PageNo: 0,
        PageSize: 20
      };
  
• @Host() or ng-container incompatibility between angular 9 and 10

  Here are two live examples on stackblitz:

  • angular 9
  • angular 10

  To check the difference between them, open console and notice that:

  In form-error-control-name.directive.ts line 22:

  For angular 9, this.parent.control is not null For angular 10, this.parent.control will throw error

  What is the difference? I checked angular 10 update doc but don't know which incompatibility this is.

  Thanks!
• How can I delete a row by its SKU instead of its ID?

  I try to delete the row using the sku of the product. I'm using spring boot and angular. I got an error when I added the sku on my button like this one (click)="onDeleteProductBySku(deleteClick?.sku)" it said that the Property 'sku' does not exist on type '(product: Product) => void'.. On my command prompt, I got this error. How can I solve this problem?

  Error: product/product.component.html:50:109 - error TS2339: Property 'sku' does not exist on type '(product: Product) => void'.
  
  50 <button class="btn btn-outline-danger btn-sm me-2" (click)="onDeleteProductBySku(deleteClick?.sku)">Delete</button>
                                                                                                                                    
  product/product.component.ts:12:16
      12   templateUrl: './product.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~
  Error occurs in the template of component ProductComponent.
  

  ProductsController.java --> This is working on the postman.

  //Delete a product record using sku
  //http://localhost:8080/products/deletebysku?sku=12345678
  
  @DeleteMapping("/products/deletebysku")
  @ResponseBody
  private void deleteProductBySku(@RequestParam String sku){
      productsService.deleteProductBySku(sku);
  }
  

  product.component.ts

   public deleteProduct!: Product;
  
   public onDeleteProductBySku(sku: string): void {
      this.productServive.deleteProductBySku(sku).subscribe(
        (response: void) => {
          this.messageShow();
          console.log(response);
          this.getAllProduct();
        },
        (error: HttpErrorResponse) => {
          this.errorMessage(error.message);
        }
      );
   }
  
   public deleteClick(product: Product) {
     this.deleteProduct = product;
     console.log("delete by sku");
   }
  

  product.service.ts

  public deleteProductBySku(sku: string): Observable<void> {
    return this.http.delete<void>(`${this.apiServerUrl}/products/deletebysku?sku=${sku}`);
  }
  

  product.component.html

  <button class="btn btn-outline-danger btn-sm me-2" (click)="onDeleteProductBySku(deleteClick?.sku)">Delete</button>
  
• Change multiple Fullcalender Day Cell Backgrounds from external Data specified in Database Table

  Im trying to change the fullcalendar (v3) day cell background-color for specific days declared in a databse table. So far i was able to try it with manual input for only one day which works fine with the following code:

          dayRender: function (date, cell) {
              
              var day_declared_in_database = '2022-05-13';
              
              var specific_day = moment('' + day_declared_in_database + 'T00:00Z');
              if (date.isSame(specific_day, "day")) {
                  cell.css("background-color", "blue");
              }
          },
  

  Any idea how to get external data into dayRender and loop through all days to apply the color to multiple different days?

  
• FullCalendar & Next.js - Warning: Prop `id` did not match. Server: "fc-dom-171" Client: "fc-dom-2"

  Context

  I'm using FullCalendar v5.11.0, NextJS v12.0.7, React v17.0.2 and Typescript v4.3.5.

  I wanted to create a simple calendar, based on FullCalendar documentation, so I've created a Calendar component that is containing this code:

  import FullCalendar from '@fullcalendar/react';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import Card from '../Card/Card';
  import styles from './Calendar.module.scss';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import interactionPlugin from '@fullcalendar/interaction';
  
  type CalendarProps = {
    className?: string;
  };
  
  const Calendar = ({ className }: CalendarProps) => {
    return (
      <Card
        className={
          styles.calendarWrapper +
          (className !== undefined ? ' ' + className : '')
        }
      >
        <FullCalendar
          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
          locale='fr'
          firstDay={1}
          headerToolbar={{
            start: 'prev next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay',
          }}
          businessHours={{
            // days of week. an array of zero-based day of week integers (0=Sunday)
            daysOfWeek: [1, 2, 3, 4, 5], // Monday - Thursday
  
            startTime: '7:00', // a start time
            endTime: '23:00', // an end time
          }}
          nowIndicator={true}
          selectable={true}
          selectMirror={true}
          weekNumbers={true}
          weekNumberFormat={{ week: 'numeric' }}
          initialView='dayGridMonth'
          eventColor='var(--sw-color-accent-300)'
          eventTextColor='var(--sw-color-primary-900)'
        />
      </Card>
    );
  };
  
  export default Calendar;
  

  My problem

  Where I'm checking the console log, I can see that error:

  Warning: Prop `id` did not match. Server: "fc-dom-1" Client: "fc-dom-2"
  
  See more info here: https://nextjs.org/docs/messages/react-hydration-error
  

  I've done researches and I found that we can use dynamic import with Next.js to disable SSR for a component, but after some tries I can't understand how dynamic imports are working...

  Here is the code I started to try, without finding a way to make it works:

  const FullCalendarWithNoSSR = dynamic(
    () =>
      (import'@fullcalendar/react').then(
        (mod) => mod.FullCalendar
      ),
    {
      ssr: false,
    }
  );
  

  I'm new with Next.js and FullCalendar, so I'm probably misunderstanding something, especially about dynamic imports. Does someone have an idea of what I'm doing wrong or how to use FulLCalendar properly with Next.js ?
• Moment.js isAfter() is not a function

  I'm using FullCalendar with jQuery timepicker to set the event.

  I have 2 variables named timeDateInizio and timeDateFine.

  Those two variables are string created by merging 2 other variables each, one for the YY:MM:dd and the other for hh:mm:ss

  Then I have an if to check if timeDateInizio is after timeDateFine, and if it is a bootbox appear to signal an error. Here is the if: if (timeDateInizio.isAfter(timeDateFine)) {...}.

  I receive these error when I get to the if: "Uncaught TypeError: timeDateInizio.isAfter is not a function."

  Can someone help me solve this?