Axborot texnologiyalari va kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot texnologiyalari universiteti “Individual loyiha” ishi

{day.date.getDate()}

{selected ?

setTask({})}>+

: null}

)
}

export default Day;

Header.js dagi kodlar.
import React, { useContext } from "react";
import { CalendarContext } from "../context/CalendarContext";

function Header() {

const { date, setDate } = useContext(CalendarContext);
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];

const addMonth = value => {

const tmp = new Date(date.setMonth(date.getMonth() + value));
setDate(tmp);
};

return (

{monthNames[date.getMonth()]} {date.getFullYear()}

addMonth(-1)}>
width="52px"
height="52px"
viewBox="0 0 52 52"
data-name="Layer 1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
>




className="button button-white"
onClick={() => setDate(new Date())}
>
Today

addMonth(1)}>
width="52px"
height="52px"
viewBox="0 0 52 52"
data-name="Layer 1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
>

);
}

export default Header;

Task.js dagi kodlar.

import React, { useContext } from 'react'
import { CalendarContext } from '../context/CalendarContext';

function Task({task, style}) {

const {setTask} = useContext(CalendarContext);

return (
{setTask(task)}}>{task.name}

)
}

export default Task

TaskForm.js dagi fayllar.

import React, { useContext, useEffect, useState } from "react";
import Modal from "react-modal";
import { CalendarContext } from "../context/CalendarContext";
import { CirclePicker } from "react-color";

const customStyles = {

content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)"
}
};

function TaskForm() {

const { date, task, setTask, saveTask, setDate, deleteTask } = useContext(
CalendarContext
);

const [name, setName] = useState("");

const [color, setColor] = useState("#f44336");
const [error, setError] = useState(false);

useEffect(

() => {
if (task) {
setName(task.name || "");
setColor(task.color || "#f44336");
}
},
[task]
);

const closeModal = () => {

setTask(null);
setError(false);
};

const _saveTask = () => {

if (name.trim().length < 1) {
setError(true);
return;
}
setError(false);

saveTask({

...task,
date: date,
name: name,
color: color
});
setDate(date);
closeModal();
};

const _deleteTask = () => {

deleteTask(task.id);
setDate(date);
closeModal();
setError(false);
};

return (

isOpen={task != null}
onRequestClose={closeModal}
style={customStyles}
ariaHideApp={false}
contentLabel="Task Form"
>

Name
name="name"
value={name}
onChange={e => setName(e.target.value)}
type="text"
placeholder="Task Name"
/>
Color

color={color}
onChange={color => {
setColor(color.hex);
}}
/>

Cancel

{task && task.id
?
Delete

: null}

Save

{error
?
The name of the task is required
: null}

);
}

export default TaskForm;

Utils.js dagi filelar.
export function computeColor(color, f) {
const compute = (c, f) => Math.floor(Math.min(parseInt(c, 16) * f, 255)).toString(16).padStart(2, '0');
const b = compute(color.substring(color.length - 2, color.length - 0), f);
const g = compute(color.substring(color.length - 4, color.length - 2), f);
const r = compute(color.substring(color.length - 6, color.length - 4), f);
return `${(color.charAt(0) === '#') ? '#' : ''}${r}${g}${b}`;
}

export function contrast(color, threshold=0.5) {

const b = parseInt(color.substring(color.length - 2, color.length - 0), 16);

const g = parseInt(color.substring(color.length - 4, color.length - 2), 16);
const r = parseInt(color.substring(color.length - 6, color.length - 4), 16);

let luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;

let d = luminance > threshold ? '000000' : 'ffffff';
return `${(color.charAt(0) === '#') ? '#' : ''}${d}`;
}