Jump to content

Schedule


rtalmeida

Recommended Posts

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? :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...^_^

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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;

CalendarPanelBG2.png.34ca0aebbd33a372d8dc7807e0feea17.png

You can analyze this approach for now 

Link to comment
Share on other sites

  • 4 years later...

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

 

event Before.png

Link to comment
Share on other sites

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

 

event Before.png

 

Up

 

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...