[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>

[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?

[mdaumasParticipant]

Thanks, it works!

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

[Author]

Posts