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;
//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
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) => {
//console.log("eventStyleGetter: " + event);
@ -296,10 +297,13 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
//gray
backgroundColor = '#a0aec0';
}
if (event.isActive) {
switch (event.type) {
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;
case 'recurring':
backgroundColor = '#63b3ed'; // blue-300 from Tailwind CSS
@ -315,7 +319,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
return {
style: {
backgroundColor,
opacity: 0.8,
opacity: event.startTime < new Date() ? 0.5 : 1,
color: 'white',
border: '0px',
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 [isHovered, setIsHovered] = useState(false);
let eventStyle = {
@ -342,7 +346,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
// bgColor = "bg-orange-500";
// }
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 = common.getTimeFomatted(event.startTime) + " - " + common.getTimeFomatted(event.endTime);
@ -365,6 +369,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
}
}
eventStyle = {
...style,
// backgroundColor: bgColorClass,
@ -376,7 +381,9 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
overflow: 'hidden', // Hide overflowed content
textOverflow: 'ellipsis' // Add ellipsis to text that's too long to fit
};
if (event.date < new Date()) {
eventStyle.opacity = 0.5;
}
}
const onDelete = (event) => {