How to Selected Day "TUniCalendarPanel"

[Luciano França]

How to Focus with another color the day that was clicked with the mouse like TuniCalender ?

[Luciano França]

      I tried to adapt the code of this approach but I can't

     could someone help me ?

[Sherzod]

Hello,

13 minutes ago, Luciano França said:

      I tried to adapt the code of this approach but I can't

What doesn't work, are you getting an error or?

[Sherzod]

25 minutes ago, Luciano França said:

     could someone help me ?

Okay, try this approach.

OnCreate event:

...
  UniCalendarPanel1.ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {'+
      'sender._setBGColor = function () {'+
      '    if (sender.getView() && sender.getView().activeView.xtype == "calendar-month") {'+
      '        sender.el.select(''.x-calendar-weeks-cell'').elements.forEach(function(el){el.style[''background-color'']=""});'+
      '        sender.store.eventSource.each(function(ev) {'+
      '            dataEl = sender.el.select(''.x-calendar-weeks-cell[data-date="''+ Ext.Date.format(ev.data.startDate, ''Y-m-d'') +''"]''); '+
      '            if (dataEl.elements[0]) { '+
      '                dataEl.elements[0].style[''background-color'']="yellowgreen"'+
      '            }'+
      '        })'+
      '    }'+
      '}'+
    '}';

    //UniCalendarPanel1.ClientEvents.ExtEvents.Values['calendarStore.load'] := 'function calendarStore.load(sender, records, successful, operation, eOpts) {'+
    //  'Ext.defer(function(){' + UniCalendarPanel1.JSName + '._setBGColor()}, 1000);'+
    //'}';

    UniCalendarPanel1.ClientEvents.ExtEvents.Values['afterrender'] :=
      'function afterrender(sender, eOpts) '+
      '{                                   '+
      '    sender.getEl().dom.addEventListener("DOMNodeInserted", function (ev) {'+
      '        sender._setBGColor();                                             '+
      '    }, false);                                                            '+
      '} 
...

[Luciano França]

1 hour ago, Sherzod said:

Okay, try this approach.

OnCreate event:

...
  UniCalendarPanel1.ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {'+
      'sender._setBGColor = function () {'+
      '    if (sender.getView() && sender.getView().activeView.xtype == "calendar-month") {'+
      '        sender.el.select(''.x-calendar-weeks-cell'').elements.forEach(function(el){el.style[''background-color'']=""});'+
      '        sender.store.eventSource.each(function(ev) {'+
      '            dataEl = sender.el.select(''.x-calendar-weeks-cell[data-date="''+ Ext.Date.format(ev.data.startDate, ''Y-m-d'') +''"]''); '+
      '            if (dataEl.elements[0]) { '+
      '                dataEl.elements[0].style[''background-color'']="yellowgreen"'+
      '            }'+
      '        })'+
      '    }'+
      '}'+
    '}';

    //UniCalendarPanel1.ClientEvents.ExtEvents.Values['calendarStore.load'] := 'function calendarStore.load(sender, records, successful, operation, eOpts) {'+
    //  'Ext.defer(function(){' + UniCalendarPanel1.JSName + '._setBGColor()}, 1000);'+
    //'}';

    UniCalendarPanel1.ClientEvents.ExtEvents.Values['afterrender'] :=
      'function afterrender(sender, eOpts) '+
      '{                                   '+
      '    sender.getEl().dom.addEventListener("DOMNodeInserted", function (ev) {'+
      '        sender._setBGColor();                                             '+
      '    }, false);                                                            '+
      '} 
...

 

Am I missing an event?

See attached example which does not work

 

 

 

 

Focus Calendar Unigui.7z

[Sherzod]

22 minutes ago, Luciano França said:

Am I missing an event?

Don't know. I will try to check your testcase later today. 

[Luciano França]

On 5/17/2023 at 11:41 AM, Sherzod said:

Don't know. I will try to check your testcase later today. 

could you analyze it for me ?

Grateful.

 

[Sherzod]

Sorry, not yet. 

[Sherzod]

14 hours ago, Luciano França said:

could you analyze it for me ?

 

On 5/17/2023 at 7:18 PM, Luciano França said:

Focus Calendar Unigui.7z 6.51 kB · 0 downloads

I didn't understand your test case. There are no events, are there? 

And how do you want to test in this case!?

[Luciano França]

Just now, Sherzod said:

 

I didn't understand your test case. There are no events, are there? 

And how do you want to test in this case!?

 

There is no event in the calendar

when i said event i meant "DayClick(Sender: TUniCalendarPanel; ADate: TDateTime; Allday: Boolean);"

what I need is that the day I click it stays in another color to show the day it was clicked

 

[Sherzod]

12 minutes ago, Luciano França said:

There is no event in the calendar

when i said event i meant "DayClick(Sender: TUniCalendarPanel; ADate: TDateTime; Allday: Boolean);"

what I need is that the day I click it stays in another color to show the day it was clicked

So I misunderstood you from the start.

I do not know yet...

[Luciano França]

10 minutes ago, Sherzod said:

So I misunderstood you from the start.

I do not know yet...

I want, when clicked on a day, the focus turns to another color as if it were selected

like TUniCalendar as if it had focused on the day by default the CalendarPanel does not change the color of the day that was clicked and it is not possible to know which day it is

that is, when using the event "DayClick(Sender: TUniCalendarPanel; ADate: TDateTime; Allday: Boolean)" it should change the color of the day that was clicked

[Sherzod]

Now I understood you. 

[Luciano França]

4 hours ago, Sherzod said:

Now I understood you. 

Is there a way to do what I need?

actually I would like to use TUniCalendar but as it is difficult to customize by changing its size, holiday events etc...

This way I want the CalendarPanel to have this click effect so the user knows the date that was selected.

[Sherzod]

Well, actually the UniCalendarPanel is focused on showing events, not highlighting the selected date...

[Luciano França]

14 minutes ago, Sherzod said:

Well, actually the UniCalendarPanel is focused on showing events, not highlighting the selected date...

Yes I understand that but I believe it would be possible to do something using the event  "DayClick(Sender: TUniCalendarPanel; ADate: TDateTime; Allday: Boolean)"

and use a code similar to this

  UniCalendarPanel1.ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {'+
      'sender._setBGColor = function () {'+
      '    if (sender.getView() && sender.getView().activeView.xtype == "calendar-month") {'+
      '        sender.el.select(''.x-calendar-weeks-cell'').elements.forEach(function(el){el.style[''background-color'']=""});'+
      '        sender.store.eventSource.each(function(ev) {'+
      '            dataEl = sender.el.select(''.x-calendar-weeks-cell[data-date="''+ Ext.Date.format(ev.data.startDate, ''Y-m-d'') +''"]''); '+
      '            if (dataEl.elements[0]) { '+
      '                dataEl.elements[0].style[''background-color'']="yellowgreen"'+
      '            }'+
      '        })'+
      '    }'+
      '}'+
    '}';

 

Can you help me

Grateful.

[Sherzod]

3 minutes ago, Luciano França said:

Can you help me

Forgive my misunderstanding, once again fully describe what you want to do. I'm confused about what you want at all.

[Luciano França]

18 minutes ago, Sherzod said:

Forgive my misunderstanding, once again fully describe what you want to do. I'm confused about what you want at all.

When clicking on a day I would like it to be highlighted in "yellowgreen"

I believe that using the "DayClick" event I can do what I need because I could pass the Adate variable to StartDate

and that way you can know the day it was clicked

dirty example

procedure TMainForm.UniCalendarPanel1DayClick(Sender: TUniCalendarPanel; ADate: TDateTime; Allday: Boolean);
begin
 UniCalendarPanel1.StartDate := ADate; // detect the date that was clicked

 Sender.JSInterface.JSCall('Reload', []); // Some way to reload the calendar to paint
end;

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
 UniCalendarPanel1.ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {' +
  'sender._setBGColor = function () {' +
  'if  sender.el.select(x-calendar-weeks-cell[data-date] == ev.data.startDate)' + // If the day was clicked then I change the cell color of the day.
  ' {  dataEl.elements[0].style[''background-color'']="yellowgreen" } ';

end;

 

[Sherzod]

1 minute ago, Luciano França said:

When clicking on a day I would like it to be highlighted in "yellowgreen"

Next?

30 minutes ago, Sherzod said:

fully describe what you want to do

 

[Luciano França]

4 minutes ago, Sherzod said:

Next?

 

 

You still don't understand what I need?

I have a calendar in my system and for the proper functioning of this agent I need to use the CalendarPanel but this component is not selected the day when the user clicks on it

 

 

[Sherzod]

2 minutes ago, Luciano França said:

You still don't understand what I need?

Sorry, yes.

2 minutes ago, Luciano França said:

I have a calendar in my system and for the proper functioning of this agent I need to use the CalendarPanel but this component is not selected the day when the user clicks on it

So you don't want to use the UniCalendarPanel as intended and only highlight the one clicked date?

[Luciano França]

6 minutes ago, Sherzod said:

Sorry, yes.

So you don't want to use the UniCalendarPanel as intended and only highlight the one clicked date?

yes I intend to use TUniCalendarPane because it is a fantastic component I just need the days to change color when I click on it

Grateful.

[Sherzod]

11 minutes ago, Luciano França said:

I just need the days to change color when I click on it

Yes it's possible I guess. You can also analyze based on the above solutions to resolve this.

I will also try, but not quickly sorry, one of these days.

[Luciano França]

7 minutes ago, Sherzod said:

Yes it's possible I guess. You can also analyze based on the above solutions to resolve this.

I will also try, but not quickly sorry, one of these days.

I already tried for like 4 hours and got nothing

I tried several times, all failed.

[Luciano França]

18 hours ago, Sherzod said:

Yes it's possible I guess. You can also analyze based on the above solutions to resolve this.

I will also try, but not quickly sorry, one of these days.

I believe it is not difficult to do what I need

I need a way to capture the StartDate

I tried "this.startDate" or "sender.startDate" however does not work

 With UniCalendarPanel1 do Begin
  ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {' +
   'sender._setBGColor = function () {' +

   ' dataEl = sender.el.select(''.x-calendar-weeks-cell[data-date=sender.startDate]''); ' + // error

   '  if (dataEl.elements[0]) { dataEl.elements[0].style[''background-color'']="yellowgreen" }' +

   '}}';

  ClientEvents.ExtEvents.Values['calendarStore.load'] := 'function calendarStore.load(sender, records, successful, operation, eOpts) {' +
   'Ext.defer(function(){' + JSName + '._setBGColor()}, 500); }';
 End;