Schedule

rtalmeida · October 22, 2018

I have a schedule for professionals, I need to change the color of the day that it does not answer, to prevent the user from trying to click on days that it does not meet.

Sherzod · October 22, 2018

Hi,

Can you please explain in more details ?!

Freeman35 · October 22, 2018

Can be about this?

rtalmeida · October 22, 2018

How can I make a few days with another color?

Sherzod · October 22, 2018

2 hours ago, Freeman35 said:

Can be about this?

2 hours ago, rtalmeida said:

How can I make a few days with another color?

I'm working on it...

rtalmeida · October 22, 2018

ok

rtalmeida · October 24, 2018

News?

Sherzod · October 24, 2018

Sorry, not yet

Freeman35 · October 26, 2018

Hi,

This code from in firefox, I modified manual in browser (via F12)

<td data-index="1" class="x-calendar-weeks-cell _xxx" data-date="2018-03-13"><div class="x-calendar-weeks-cell-inner"><span class="x-calendar-weeks-day-text">13</span><div class="x-calendar-weeks-overflow"></div></div></td>

._xxx{background-color:lime !important;}

This is my test class

I have no idea about JS. Just idea.

data-date="2018-03-13" is unique so If I finf this value, This mean found cell (td) then add my css(_xxx) this td's class definition. This can be solution, but problem is how to?

rtalmeida · October 29, 2018

Any other suggestions?

Sherzod · October 29, 2018

22 minutes ago, rtalmeida said:

Any other suggestions?

I have not yet found a complete and optimal solution

Sherzod · October 31, 2018

Hello,

Maybe something like this, for example for "2018-10-16"

1. UniFormCreate:

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  ...
  with UniCalendarPanel1 do
  begin
    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'']=""});'+
      '      dataEl = sender.el.select(''.x-calendar-weeks-cell[data-date="2018-10-16"]''); if (dataEl.elements[0]) {dataEl.elements[0].style[''background-color'']="yellowgreen"};'+
      '  }'+
      '}'+
    '}';

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

2.

procedure TMainForm.UniCalendarPanel1ViewChange(Sender: TUniCalendarPanel;
  CurrentView: TUniCalendarViewType);
begin
  if CurrentView = cvMonth then
  begin
    Sender.JSInterface.JSCall('_setBGColor', []);
  end;

end;

3.

procedure TMainForm.UniCalendarPanel1DateChange(Sender: TUniCalendarPanel;
  StartDate, ViewStart, ViewEnd: TDateTime);
begin
  UniCalendar1.Date := UniCalendarPanel1.StartDate;

  Sender.JSInterface.JSCall('_setBGColor', []);
end;

CalendarPanelBG2.png.34ca0aebbd33a372d8dc7807e0feea17.png

Freeman35 · October 31, 2018

Thank you Sherzod,

This solution is not good for me This code good for, just special date.

What I need? I wanna chage backgroud color, if there is a any event in that date. I mean, on your screenshot, "31-10-2018", "01-11-2018", "02-11-2018"

Quote

<td data-index="1" class="x-calendar-weeks-cell" data-date="2018-10-30">

<div class="x-calendar-weeks-cell-inner">

<span class="x-calendar-weeks-day-text">30</span>

<div class="x-calendar-weeks-overflow"></div>

</div>

</td>

(from my code) If I'm not wrong, secha add this div "x-calendar-weeks-overflow" If td has a event. For me, If this class added, then I wanna change this td's backgrouod colour. My problem is how to?

<tr class="x-calendar-weeks-row" data-week="0"> data-week="0" zero based row index, this row can be previos month's day

<td data-index="0" class="x-calendar-weeks-cell" data-date="2018-10-01"> data-index="0" zero based day number of week

if cell has a previos moth's day, that div added this classes more "x-calendar-weeks-past-cell x-calendar-weeks-outside-cell"

if cell has a next month's day, that div added this classes more "x-calendar-weeks-future-cell x-calendar-weeks-outside-cell"

I think secha should add acces to tb's css, so I can colored or what I want. Or maybe modify js code. Total 36 css classname, or shortway each before build cell trigger onevent so wecan add or change this css or style. Of cource avent is so usefull 'cos, this code can use in day view and week view too.

FFREDIANELLI · October 31, 2018

Sorry if its not a beatifull solution , but the commercial schedule that i use in my photographic studio just fill all the weekends dates or not available hours with a reserved event in the database of scheduled tasks... so nobudy will be able to reserve this hours because they are reserved to me... ^_^

Sherzod · November 1, 2018

20 hours ago, Freeman35 said:

What I need? I wanna chage backgroud color, if there is a any event in that date. I mean, on your screenshot, "31-10-2018", "01-11-2018", "02-11-2018"

Dirty workaround:

    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"'+
      '            }'+
      '        })'+
      '    }'+
      '}'+
    '}';

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

Freeman35 · November 1, 2018

Thank you so much. This is perfect solution for me.

I add and modified two lines for me. 'cos I changed default css.

'sender.el.select(''.x-calendar-weeks-cell'').elements.forEach(function(el){el.style[''background-color'']="#FFF8B3"});'+ // My Default color
'sender.el.select(''.x-calendar-weeks-past-cell'').elements.forEach(function(el){el.style[''background-color'']="lightgray"});'+ //previous moth's day's color

eduardosuruagy · November 2, 2018

On 01/11/2018 at 08:45, Sherzod said:

Solução Suja:

Where do I put the dates in this example?

Sherzod · November 2, 2018

1 hour ago, eduardosuruagy said:

Where do I put the dates in this example?

Dates that have events will be taken into account.

eduardosuruagy · November 2, 2018

7 minutes ago, Sherzod said:

Datas que tenham eventos serão levadas em conta.

Got it, but what if I just want some specific dates? How would I do it?

Sherzod · November 2, 2018

On 10/31/2018 at 11:42 AM, Sherzod said:

Hello,

Maybe something like this, for example for "2018-10-16"

1. UniFormCreate:


procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  ...
  with UniCalendarPanel1 do
  begin
    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'']=""});'+
      '      dataEl = sender.el.select(''.x-calendar-weeks-cell[data-date="2018-10-16"]''); if (dataEl.elements[0]) {dataEl.elements[0].style[''background-color'']="yellowgreen"};'+
      '  }'+
      '}'+
    '}';

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

2.


procedure TMainForm.UniCalendarPanel1ViewChange(Sender: TUniCalendarPanel;
  CurrentView: TUniCalendarViewType);
begin
  if CurrentView = cvMonth then
  begin
    Sender.JSInterface.JSCall('_setBGColor', []);
  end;

end;

3.


procedure TMainForm.UniCalendarPanel1DateChange(Sender: TUniCalendarPanel;
  StartDate, ViewStart, ViewEnd: TDateTime);
begin
  UniCalendar1.Date := UniCalendarPanel1.StartDate;

  Sender.JSInterface.JSCall('_setBGColor', []);
end;

You can analyze this approach for now

eduardosuruagy · November 2, 2018

29 minutes ago, Sherzod said:

You can analyze this approach for now

If I have 3 dates, how would I do it?

rtalmeida · November 5, 2018

Does the solution work for a date and for multiple dates?

Freeman35 · November 5, 2018

4 minutes ago, rtalmeida said:

Does the solution work for a date and for multiple dates?

for all added dates, and if event added.

Luciano França · May 21, 2023

What is wrong with this code below

because it does not change the color of the day that has an event
is taking the day before the event

attached a project

procedure TMainForm.UniCalendarPanel1DateChange(Sender: TUniCalendarPanel; AStartDate, AViewStart, AViewEnd: TDateTime);
begin
 Sender.JSInterface.JSCall('_setBGColor', []);

end;

procedure TMainForm.UniCalendarPanel1ViewChange(Sender: TUniCalendarPanel; CurrentView: TUniCalendarViewType);
begin
 if CurrentView = cvMonth then begin
  Sender.JSInterface.JSCall('_setBGColor', []);
 end;

end;

procedure TMainForm.UniFormCreate(Sender: TObject);
Var E: TUniCalendarEvent;
begin

 E := UniCalendarPanel1.Events.Add;
 E.CalendarId := 1;
 E.Title := 'Teste';
 E.StartDate := Date + 5;
 E.EndDate := Date + 5;
 E.IsAllDay := True;

 With UniCalendarPanel1 do Begin
  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"' +
   '            }' +
   '        })' +
   '    }' +
   '}}';

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

 End;

end;

Event Calendar Unigui.7z

Luciano França · May 29, 2023

On 5/21/2023 at 9:13 AM, Luciano França said:

What is wrong with this code below

because it does not change the color of the day that has an event
is taking the day before the event

attached a project

procedure TMainForm.UniCalendarPanel1DateChange(Sender: TUniCalendarPanel; AStartDate, AViewStart, AViewEnd: TDateTime);
begin
 Sender.JSInterface.JSCall('_setBGColor', []);

end;

procedure TMainForm.UniCalendarPanel1ViewChange(Sender: TUniCalendarPanel; CurrentView: TUniCalendarViewType);
begin
 if CurrentView = cvMonth then begin
  Sender.JSInterface.JSCall('_setBGColor', []);
 end;

end;

procedure TMainForm.UniFormCreate(Sender: TObject);
Var E: TUniCalendarEvent;
begin

 E := UniCalendarPanel1.Events.Add;
 E.CalendarId := 1;
 E.Title := 'Teste';
 E.StartDate := Date + 5;
 E.EndDate := Date + 5;
 E.IsAllDay := True;

 With UniCalendarPanel1 do Begin
  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"' +
   '            }' +
   '        })' +
   '    }' +
   '}}';

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

 End;

end;

Event Calendar Unigui.7z 3.43 kB · 2 downloads

Up

Sign In

Schedule

Recommended Posts

rtalmeida

Sherzod

Freeman35

rtalmeida

Sherzod

rtalmeida

rtalmeida

Sherzod

Freeman35

rtalmeida

Sherzod

Sherzod

Freeman35

FFREDIANELLI

Sherzod

Freeman35

eduardosuruagy

Sherzod

eduardosuruagy

Sherzod

eduardosuruagy

rtalmeida

Freeman35

Luciano França

Luciano França

Join the conversation

Browse

Activity