jqxScheduler – Get datetime and format on Angular

[mdaumasParticipant]

Hello!

I want to get the datetime value setted on the scheduler and format it using the formats setted on the localization. I found that solution:

var date = $("#jqxWidget").jqxDateTimeInput('getDate');
var formattedDate = $.jqx.dataFormat.formatdate(date, 'd');

but that was in JQuery and I want to know if it is possible to do the same on Angular.

Best regards!!

[HristoParticipant]

Hello mdaumas,

You could achieve it in the same way just without the “$” object.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[mdaumasParticipant]

Thanks, it works!

Now, how do can I set in the localization object to use the standard 24h time format?

[HristoParticipant]

Hello mdaumas,

If you mean the jqxDateTimeInput then you need to use the formatString property to set it as you wish.
About the jqxScheduler, I would like to suggest you look at this JavaScript demo where you could easily check the localization object.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[mdaumasParticipant]

Unfortunately the solution that you provide me doesn’t helped.

What I actually want is to set the time format used by my jqxScheduler to the 24hr format, therefore removing the ‘AM’ and ‘PM’ from the new appointment dialog. Is that possible?

[HristoParticipant]

Hello mdaumas,

I understand your point of view.
You need to customize the jqxDateTimeInput in the dialog.
For this purpose, it will be better if you make a combination between the previous demo and the “Edit Dialog” demo.
Please, try this approach below in the editDialogCreate callback and also, in the editOpenDialog callback for already existed dialog:

setTimeout(() => {
	fields.from.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
	fields.to.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
});

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[mdaumasParticipant]

Hi Hristo

The solution you provided me worked, but I got the error ‘ERROR TypeError: fields is undefined’.

Here is my code.

app.component.ts

import { jqxSchedulerComponent } from 'jqwidgets-ng/jqxscheduler';

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';

import { ScheduleService } from 'src/services/schedule.service';
import { DatePipe } from "@angular/common";

@Component({
  selector: 'app-root',  
  templateUrl: './app.component.html',
  providers: [DatePipe]
})
export class AppComponent implements AfterViewInit, OnInit {
  @ViewChild('scheduler', {static: false}) myScheduler: jqxSchedulerComponent;

  source: any = {
    dataType: 'array',
    dataFields: [
      { name: 'id', type: 'string' },
      { name: 'description', type: 'string' },
      { name: 'subject', type: 'string' },
      { name: 'startDate', type: 'date', format: 'yyyy/MM/dd HH:mm' },
      { name: 'endDate', type: 'date', format: 'yyyy/MM/dd HH:mm' },
      { name: 'recurrenceRule', type: 'string' }
    ],
    id: 'id',
    localData: []
  };
  appointmentDataFields: any = {
    from: "startDate",
    to: "endDate",
    id: "id",
    description: "description",
    subject: "subject", 
    allDay: "allDay",
    recurrencePattern: 'recurrenceRule'
  };
  resources: any = {
    colorScheme: "scheme01",
    dataField: "calendar",
    source: new jqx.dataAdapter(this.source)
  };
  views: any[] = [
    { type: 'dayView', timeRuler: { formatString: 'HH:mm' } },
    { type: 'weekView', timeRuler: { formatString: 'HH:mm '}},
    { type: 'monthView' },
    { type: 'agendaView' }
  ]; 
  dataAdapter: any;
  date: any = new jqx.date(new Date());

  localization = {
    '/' : '/',
    ':' : ':',
    firstDay: 1,
    days: {
      names: [ 'Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado' ],
      namesAbbr: [ 'Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab' ],
      namesShort: [ 'D', 'S', 'T', 'Q', 'Q', 'S', 'S' ]
    },
    months: {
      names: [ 'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro' ],
      namesAbbr: [ 'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez' ]
    },
    twoDigitYearMax: 2029,
    patterns: {
      d: 'd/M/yyyy',      
      D: 'dddd, MMMM dd, yyyy',
      t: 'HH:mm tt',
      T: 'HH:mm:ss tt',
      f: 'dddd, MMMM dd, yyyy HH:mm tt',
      F: 'dddd, MMMM dd, yyyy HH:mm:ss tt',
      M: 'MMMM dd',
      Y: 'yyyy MMMM',
      S: 'yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss',
      ISO: 'yyyy/MM/dd HH:mm',            
    }
  }

  constructor(private scheduleService: ScheduleService,
              private datePipe: DatePipe) { }

  ngOnInit(): void { }

  ngAfterViewInit(): void {    
    this.getSchedules();
  }  

  getSchedules(){
    this.scheduleService.getSchedules().subscribe((res: any[]) => {
      this.source.localData = res;
      this.dataAdapter = new jqx.dataAdapter(this.source);
    });
  }  

  AppointmentAdd(event: any){    
    let scheduleData = event.args.appointment.originalData;
    
    var data = {
      id: scheduleData.id,
      description: scheduleData.description,
      subject: scheduleData.subject,      
      startDate: this.datePipe.transform(scheduleData.startDate, 'yyyy/MM/dd HH:mm'),
      endDate: this.datePipe.transform(scheduleData.endDate, 'yyyy/MM/dd HH:mm'),
      recurrenceRule: scheduleData.recurrenceRule == null ? '' : scheduleData.recurrenceRule.toString()      
    }    

    this.scheduleService.saveSchedule(data).subscribe(
      res => {
        console.log(res);
      },
      err => {
        console.error(err);
      }
    );
  }

  editDialogCreate = (dialog, fields, editAppointment) => {
    console.log('fields', fields);
    setTimeout(() => {
     fields.from.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
     fields.to.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
    });
  }

  editDialogOpen = (dialog, fields, editAppointment) => {
    console.log('fields', fields);
    setTimeout(() => {
      fields.from.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
      fields.to.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
     });
  }  
}

app.component.html

<jqxScheduler #scheduler
              (onAppointmentAdd)="AppointmentAdd($event)" 
              [editDialogCreate]="editDialogCreate"
              [editDialogOpen]="editDialogOpen"              
              [localization]="localization"
              [date]="date" 
              [width]="800" 
              [height]="600" 
              [source]="dataAdapter" 
              [showLegend]="true" 
              [view]="'monthView'" 
              [appointmentDataFields]="appointmentDataFields"
              [resources]="resources" 
              [views]="views">
</jqxScheduler>

[HristoParticipant]

Hello mdaumas,

I do not have details about your service and I try to reproduce your case in a similar scenario.
Please, take a look at this example:
https://stackblitz.com/edit/github-cxwest?file=src/app/app.component.ts
But without success could you provide us with more details?
If it possible for you to edit the example and to provide steps to reproduce it, it will be better.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts