popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve calendar styles

Browse Source
This commit is contained in:
Dobromir Popov
2024-04-27 01:39:15 +03:00
parent a570f7f848
commit 67e7e7c854
1 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/calendar/avcalendar.tsx
View File

@ -211,7 +211,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
if (!start || !end) return; if (!start || !end) return;
//readonly for past dates (ToDo: if not admin) //readonly for past dates (ToDo: if not admin)
//if (startdate < new Date() || end < new Date() || startdate > end) return; if (startdate < new Date() || end < new Date() || startdate > end) return;
// Check if start and end are on the same day // Check if start and end are on the same day
if (startdate.toDateString() !== enddate.toDateString()) { if (startdate.toDateString() !== enddate.toDateString()) {
@ -275,6 +275,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
}; };
// REDRAW (PAGING) STYLES FOR THE EVENT DEFINED HERE
const eventStyleGetter = (event, start, end, isSelected) => { const eventStyleGetter = (event, start, end, isSelected) => {
//console.log("eventStyleGetter: " + event); //console.log("eventStyleGetter: " + event);
@ -296,10 +297,13 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
//gray //gray
backgroundColor = '#a0aec0'; backgroundColor = '#a0aec0';
} }
if (event.isActive) { if (event.isActive) {
switch (event.type) { switch (event.type) {
case 'assignment': case 'assignment':
backgroundColor = event.isConfirmed ? '#48bb78' : '#f6e05e'; // green-500 and yellow-300 from Tailwind CSS // backgroundColor = '#48bb78' // always green-500 as we don't pass isConfirmed correctly
//backgroundColor = event.isConfirmed ? '#48bb78' : '#f6e05e'; // green-500 and yellow-300 from Tailwind CSS
break; break;
case 'recurring': case 'recurring':
backgroundColor = '#63b3ed'; // blue-300 from Tailwind CSS backgroundColor = '#63b3ed'; // blue-300 from Tailwind CSS
@ -315,7 +319,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
return { return {
style: { style: {
backgroundColor, backgroundColor,
opacity: 0.8, opacity: event.startTime < new Date() ? 0.5 : 1,
color: 'white', color: 'white',
border: '0px', border: '0px',
display: 'block', display: 'block',
@ -323,7 +327,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
}; };
} }
// Custom Components // INITIAL STYLE FOR THE EVENT DEFINED HERE
const EventWrapper = ({ event, style }) => { const EventWrapper = ({ event, style }) => {
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
let eventStyle = { let eventStyle = {
@ -342,7 +346,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
// bgColor = "bg-orange-500"; // bgColor = "bg-orange-500";
// } // }
if (event.type === "assignment") { if (event.type === "assignment") {
bgColor = event.isBySystem ? "bg-red-500" : (event.isConfirmed ? "bg-green-500" : "bg-yellow-500"); bgColor = event.isBySystem ? "bg-red-500" : (event.isConfirmed || true ? "bg-green-500" : "bg-yellow-500");
//event.title = event.publisher.name; //ToDo: add other publishers names //event.title = event.publisher.name; //ToDo: add other publishers names
//event.title = common.getTimeFomatted(event.startTime) + " - " + common.getTimeFomatted(event.endTime); //event.title = common.getTimeFomatted(event.startTime) + " - " + common.getTimeFomatted(event.endTime);
@ -365,6 +369,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
} }
} }
eventStyle = { eventStyle = {
...style, ...style,
// backgroundColor: bgColorClass, // backgroundColor: bgColorClass,
@ -376,7 +381,9 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
overflow: 'hidden', // Hide overflowed content overflow: 'hidden', // Hide overflowed content
textOverflow: 'ellipsis' // Add ellipsis to text that's too long to fit textOverflow: 'ellipsis' // Add ellipsis to text that's too long to fit
}; };
if (event.date < new Date()) {
eventStyle.opacity = 0.5;
}
} }
const onDelete = (event) => { const onDelete = (event) => {