rtalmeida Posted October 22, 2018 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 22, 2018 Share Posted October 22, 2018 Hi, Can you please explain in more details ?! Quote Link to comment Share on other sites More sharing options...
Freeman35 Posted October 22, 2018 Share Posted October 22, 2018 Can be about this? Quote Link to comment Share on other sites More sharing options...
rtalmeida Posted October 22, 2018 Author Share Posted October 22, 2018 How can I make a few days with another color? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 22, 2018 Share Posted 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... Quote Link to comment Share on other sites More sharing options...
rtalmeida Posted October 22, 2018 Author Share Posted October 22, 2018 ok Quote Link to comment Share on other sites More sharing options...
rtalmeida Posted October 24, 2018 Author Share Posted October 24, 2018 News? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 24, 2018 Share Posted October 24, 2018 Sorry, not yet Quote Link to comment Share on other sites More sharing options...
Freeman35 Posted October 26, 2018 Share Posted 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? Quote Link to comment Share on other sites More sharing options...
rtalmeida Posted October 29, 2018 Author Share Posted October 29, 2018 Any other suggestions? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 29, 2018 Share Posted October 29, 2018 22 minutes ago, rtalmeida said: Any other suggestions? I have not yet found a complete and optimal solution Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 31, 2018 Share Posted 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; Quote Link to comment Share on other sites More sharing options...
Freeman35 Posted October 31, 2018 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
FFREDIANELLI Posted October 31, 2018 Share Posted 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... Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 1, 2018 Share Posted 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);'+ '}'; Quote Link to comment Share on other sites More sharing options...
Freeman35 Posted November 1, 2018 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
eduardosuruagy Posted November 2, 2018 Share Posted November 2, 2018 On 01/11/2018 at 08:45, Sherzod said: Solução Suja: Where do I put the dates in this example? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 2, 2018 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
eduardosuruagy Posted November 2, 2018 Share Posted 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? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 2, 2018 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
eduardosuruagy Posted November 2, 2018 Share Posted 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? Quote Link to comment Share on other sites More sharing options...
rtalmeida Posted November 5, 2018 Author Share Posted November 5, 2018 Does the solution work for a date and for multiple dates? Quote Link to comment Share on other sites More sharing options...
Freeman35 Posted November 5, 2018 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Luciano França Posted May 21, 2023 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Luciano França Posted May 29, 2023 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.