Как установить дату с красным выделением на каландре в массив, а не вручную - PullRequest
Новая
       5

Как установить дату с красным выделением на каландре в массив, а не вручную

0 голосов
/ 02 октября 2019

Я работаю над своей задачей, сейчас создаю календарь с php, проблема в том, что моя лекция хочет, чтобы значение даты было выделено красным цветом, кроме пятницы, чтобы реализовать его в массиве. я застрял сейчас, я попробовал некоторые циклы и алгоритм, но все же он не работает, может быть, кто-то может мне помочь и научить меня, как это сделать 

body {
	font-family: Arial;
	margin-left: 5%;
	margin-right: 5%;
	background-color: #ecfbff;
	color: #686868;
	}

h2, h1 {
	text-align: center;
	color: black;
	}

table.calendar { 
	border-left:1px solid #999;
	padding: 0;
	border-spacing: 0; 			
	}
td.kotak{
	border: blue solid 2px;		
}
div.day-number-special 	{ 
	background:red; 
	padding:5px; 
	color:#fff; 
	font-weight:bold;  
	margin:auto; 
	width:20px; 
	text-align:center; 
	}

td.calendar-day	{ 
	min-height:80px; 
	font-size:11px;  
	} 

td.calendar-day:hover	{ 
	background:black;
	color: 	white; 
	}

td.calendar-day-np	{
	background:#eee; 
	min-height:80px; 
	}

td.calendar-day-head { 
	background:aqua; 
	font-weight:bold; 
	text-align:center;  
	padding:5px;
	min-width:57px;  
	border-bottom:1px solid #999; 
	border-top:1px solid #999; 
	border-right:1px solid #999; 
	color: black;
	}

div.day-number	{ 
	background:#999; 
	padding:5px; 
	color:black; 
	font-weight:bold; 
	position: relative; 
	margin:auto;	 
	width:20px; 
	text-align:center; 
	}

td.calendar-day, td.calendar-day-np {  
	padding:5px; 
	border-bottom:1px solid #999; 
	border-right:1px solid #999; 
	}

div.jumat	{ 
	background:red; 
	padding:5px; 
	color:#fff; 
	font-weight:bold;  
	margin:auto; 
	width:20px; 
	text-align:center; 
	}


a {
    text-decoration: none;
    color:#fff;
} 

div.Hari-ini  { 
	background: yellow; 
	padding:5px; 
	color:#fff; 
	font-weight:bold; 
	width: 20px; 
	margin:auto	; 
	text-align:center; 
	}
<!DOCTYPE html>
<html lang="id">
<head>
	<title>Bima</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
	<h1>My Calendar</h1>
	<br>
<?php
	function draw_calendar($month,$year){
	
	$calendar = '<table class="calendar">';	

	$Hari = array('Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu');
	$Tgl = array('1','5','7','3','19','1','19','30','1','3','4','5','6','7','11','17','1','9','24','25');
	$Bulan = array('1','2','3','4','4','5','5','5','6','6','6','6','6','6','8','8','9','11','12','12');
	$lenth = count($Bulan);
	$calendar.= '<tr class="calendar-row"><td class="calendar-day-head">'.implode('</td><td class="calendar-day-head">',$Hari).'</td></tr>';
	$running_day = date('w',mktime(0,0,0,$month,1,$year));
	$days_in_month = date('t',mktime(0,0,0,$month,1,$year));
	$days_in_this_week = 1;
	$day_counter = 0;
	$dates_array = array();

	$calendar.= '<tr class="calendar-row">';

	for($x = 0; $x < $running_day; $x++):
		$calendar.= '<td class="calendar-day-np"> </td>';
		$days_in_this_week++;
	endfor;
	for($list_day = 1; $list_day <= $days_in_month; $list_day++):
		$calendar.= '<td class="calendar-day">';
		if ($list_day == date('d') && $month == date('m')) {
			$calendar.= '<div class="Hari-ini">'.$list_day.'</div>';
		}
		elseif ( $list_day == 1 && $month == 1 
					|| $list_day == 5 && $month == 2 
					|| $list_day == 7 && $month == 3 
					|| $list_day == 3 && $month == 4
					|| $list_day == 19 && $month == 4 
					|| $list_day == 1 && $month == 5 
					|| $list_day == 19 && $month == 5
					|| $list_day == 30 && $month == 5 
					|| $list_day == 1 && $month == 6 
					|| $list_day == 3 && $month == 6 
					|| $list_day == 4 && $month == 6
					|| $list_day == 5 && $month == 6 
					|| $list_day == 6 && $month == 6
					|| $list_day == 7 && $month == 6 
					|| $list_day == 11 && $month == 8
					|| $list_day == 17 && $month == 8 
					|| $list_day == 1 && $month == 9 
					|| $list_day == 9 && $month == 11 
					|| $list_day == 24 && $month == 12
					|| $list_day == 25 && $month == 12) {
			$calendar.= '<div class="day-number-special">'.$list_day.'</div>';
		}
		elseif ($running_day == 5) {
			$calendar.= '<div class="jumat">'.$list_day.'</div>';
		}
		elseif ($running_day != 0 || $running_day != 6) {
			$calendar.= '<div class="day-number">'.$list_day.'</div>';
		}
		$calendar.= '</td>';
		if($running_day == 6):
			if(($day_counter+1) != $days_in_month):
				$calendar.= '<tr class="calendar-row">';
			endif;
			$running_day = -1;
			$days_in_this_week = 0;
		endif;
		$days_in_this_week++; $running_day++; $day_counter++;
	endfor;

	if ($days_in_this_week == 1	): {
			#Sengaja saya kosongkan hanya untuk menghilangkan box berlebih
	}
	elseif($days_in_this_week < 8):
		for($x = 1; $x <= (8 - $days_in_this_week); $x++):
			$calendar.= '<td class="calendar-day-np"> </td>';
		endfor;
	endif;

	$calendar.= '</tr>';

	$calendar.= '</table>';
	
	return $calendar;
	}
	$Hari_Special = array('2019-1-1 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; New Years Day','2019-2-5 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Chinese New Year','2019-3-7 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Bali Hindu New Year','2019-4-3 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Isra Mi`raj','2019-4-19 &nbsp; &nbsp; &nbsp; : &nbsp; Good Friday','2019-5-1 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Labour Day','2019-5-19 &nbsp; &nbsp; &nbsp; : &nbsp; Waisak Day','2019-5-30 &nbsp; &nbsp; &nbsp; : &nbsp; Ascension Day of Jesus Christ','2019-6-1 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Pancasila Day','2019-6-3 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; First Joint holiday before Idul Fitri','2019-6-4 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Second Joint holiday before Idul Fitri','2019-6-5 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Idul Fitri Day 1','2019-6-6 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Idul Fitri Day 2','2019-6-7 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Joint holiday after Idul Fitri','2019-8-11 &nbsp; &nbsp; &nbsp; : &nbsp; Idul Adha','2019-8-17 &nbsp; &nbsp; &nbsp; : &nbsp; Independence Day','2019-9-1 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Islamic New Year','2019-11-9 &nbsp; &nbsp; &nbsp; : &nbsp; Prophet Muhammad`s Birthday','2019-12-24 &nbsp; &nbsp; : &nbsp; Christmast Holiday','2019-12-25 &nbsp; &nbsp; : &nbsp; Christmast Day');
?>  
<?php 	 	
echo '<table>',
		'<tr>
				<td class="kotak">','<h2>Januari 2019</h2>',
				draw_calendar(1,2019),
				'</td>
				<td class="kotak">','<h2>Februari 2019</h2>',
				draw_calendar(2,2019),
				'</td>
				<td class="kotak">','<h2>Maret 2019</h2>',
				draw_calendar(3,2019),
				'</td>
		</tr>',
		'<tr>
				<td class="kotak">','<h2>April 2019</h2>',
				draw_calendar(4,2019),
				'</td>
				<td class="kotak">','<h2>Mei 2019</h2>',
				draw_calendar(5,2019),
				'</td>
				<td class="kotak">','<h2>Juni 2019</h2>',
				draw_calendar(6,2019),
				'</td>
		</tr>',
		'<tr>
				<td class="kotak">','<h2>Juli 2019</h2>',
				draw_calendar(7,2019),
				'</td>
				<td class="kotak">','<h2>Agustus 2019</h2>',
				draw_calendar(8,2019),
				'</td>
				<td class="kotak">','<h2>September 2019</h2>',
				draw_calendar(9,2019),
				'</td>
		</tr>',
		'<tr>
				<td class="kotak">','<h2>Oktober 2019</h2>',
				draw_calendar(10,2019),
				'</td>
				<td class="kotak">','<h2>November 2019</h2>',
				draw_calendar(11,2019),
				'</td>
				<td class="kotak">','<h2>Desember 2019</h2>',
				draw_calendar(12,2019),
				'</td>
		</tr>',
	'</table>';

echo '<br><h3>National Holidays 2019</h3>','<br>';
echo implode('<br>',$Hari_Special);

?>

</body>
</html>

1 Ответ

0 голосов
/ 02 октября 2019

Я сделал некоторые изменения в вашем php и css файле, посмотрите, имеет ли это смысл для вас? Я не уверен, поможет ли это вам с вашим заданием. Я не совсем понял ваш первоначальный вопрос, но обновленный код должен помочь вам добавить класс CSS в разные дни, а затем вы можете использовать класс css для назначения цветов. 

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Bima</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <h1>My Calendar</h1>
    <br>
<?php
    function draw_calendar($month,$year){

    $calendar = '<table class="calendar">'; 

    $Hari = array('Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu');
    $Tgl = array('1','5','7','3','19','1','19','30','1','3','4','5','6','7','11','17','1','9','24','25');
    $Bulan = array('1','2','3','4','4','5','5','5','6','6','6','6','6','6','8','8','9','11','12','12');
    $specialDays = [
      '1' => ['1']
      '2' => ['5'],
      '3' => ['7'],
      '4' => ['3', '19'],
      '5' => ['1','19','30'],
      '6' => ['1','3','4','5','6','7'],
      '8' => ['11','17'],
      '9' => ['1'],
      '11' => ['9'],
      '12' => ['24', '25']
    ];
    $lenth = count($Bulan);
    $calendar.= '<tr class="calendar-row"><td class="calendar-day-head">'.implode('</td><td class="calendar-day-head">',$Hari).'</td></tr>';
    $running_day = date('w',mktime(0,0,0,$month,1,$year));
    $days_in_month = date('t',mktime(0,0,0,$month,1,$year));
    $days_in_this_week = 1;
    $day_counter = 0;
    $dates_array = array();

    $calendar.= '<tr class="calendar-row">';

    for($x = 0; $x < $running_day; $x++):
        $calendar.= '<td class="calendar-day-np"> </td>';
        $days_in_this_week++;
    endfor;
    for($list_day = 1; $list_day <= $days_in_month; $list_day++):
        $dateObj   = DateTime::createFromFormat('!j-m-Y', $list_day . '-' . $month . '-' . $year);
        $currentDay = strtolower($dateObj->format('D'));

        $calendar.= '<td class="calendar-day">';
        if ($list_day == date('d') && $month == date('m')) {
            $calendar.= '<div class="Hari-ini">'.$list_day.'</div>';
        }
        elseif (array_key_exists($month, $specialDays) && in_array($list_day, $specialDays[$month])) {
            $calendar.= '<div class="day-number-special">'.$list_day.'</div>';
        }
        elseif ($running_day == 5) {
            $calendar.= '<div class="jumat day-' . $currentDay . '">'.$list_day.'</div>';
        }
        elseif ($running_day != 0 || $running_day != 6) {

            $calendar.= '<div class="day-number day-' . $currentDay . '">' . $list_day .'</div>';
        }
        $calendar.= '</td>';
        if($running_day == 6):
            if(($day_counter+1) != $days_in_month):
                $calendar.= '<tr class="calendar-row">';
            endif;
            $running_day = -1;
            $days_in_this_week = 0;
        endif;
        $days_in_this_week++; $running_day++; $day_counter++;
    endfor;

    if ($days_in_this_week == 1 ): {
            #Sengaja saya kosongkan hanya untuk menghilangkan box berlebih
    }
    elseif($days_in_this_week < 8):
        for($x = 1; $x <= (8 - $days_in_this_week); $x++):
            $calendar.= '<td class="calendar-day-np"> </td>';
        endfor;
    endif;

    $calendar.= '</tr>';

    $calendar.= '</table>';

    return $calendar;
    }
    $Hari_Special = array('2019-1-1 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; New Years Day','2019-2-5 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Chinese New Year','2019-3-7 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Bali Hindu New Year','2019-4-3 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Isra Mi`raj','2019-4-19 &nbsp; &nbsp; &nbsp; : &nbsp; Good Friday','2019-5-1 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Labour Day','2019-5-19 &nbsp; &nbsp; &nbsp; : &nbsp; Waisak Day','2019-5-30 &nbsp; &nbsp; &nbsp; : &nbsp; Ascension Day of Jesus Christ','2019-6-1 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Pancasila Day','2019-6-3 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; First Joint holiday before Idul Fitri','2019-6-4 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Second Joint holiday before Idul Fitri','2019-6-5 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Idul Fitri Day 1','2019-6-6 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Idul Fitri Day 2','2019-6-7 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Joint holiday after Idul Fitri','2019-8-11 &nbsp; &nbsp; &nbsp; : &nbsp; Idul Adha','2019-8-17 &nbsp; &nbsp; &nbsp; : &nbsp; Independence Day','2019-9-1 &nbsp; &nbsp; &nbsp; &nbsp; : &nbsp; Islamic New Year','2019-11-9 &nbsp; &nbsp; &nbsp; : &nbsp; Prophet Muhammad`s Birthday','2019-12-24 &nbsp; &nbsp; : &nbsp; Christmast Holiday','2019-12-25 &nbsp; &nbsp; : &nbsp; Christmast Day');
?>  
<?php       
function draw_calendar_year($year) {    
    $output = '';
    foreach (range(1, 12) as $month){
        $dateObj   = DateTime::createFromFormat('!m', $month);
        $monthName = $dateObj->format('F');

        if ($month % 3 === 1) {
            $output .= '<tr>';    
        }
        $output .= '<td class="kotak"><h2>' . $monthName . ' ' .$year. '</h2>' . draw_calendar($month, $year) . '</td>';
        if ($month % 3 === 0) {
            $output .= '</tr>';    
        }
    }
    return '<table>' . $output . '</table>';
}

echo draw_calendar_year(2019);

echo '<br><h3>National Holidays 2019</h3>','<br>';
echo implode('<br>',$Hari_Special);

?>

</body>
</html>

Код CSS 

body {
    font-family: Arial;
    margin-left: 5%;
    margin-right: 5%;
    background-color: #ecfbff;
    color: #686868;
    }

h2, h1 {
    text-align: center;
    color: black;
    }

table.calendar { 
    border-left:1px solid #999;
    padding: 0;
    border-spacing: 0;          
    }
td.kotak{
    border: blue solid 2px;     
}
div.day-number-special  { 
    background:red; 
    padding:5px; 
    color:#fff; 
    font-weight:bold;  
    margin:auto; 
    width:20px; 
    text-align:center; 
    }

td.calendar-day { 
    min-height:80px; 
    font-size:11px;  
    } 

td.calendar-day:hover   { 
    background:black;
    color:  white; 
    }

td.calendar-day-np  {
    background:#eee; 
    min-height:80px; 
    }

td.calendar-day-head { 
    background:aqua; 
    font-weight:bold; 
    text-align:center;  
    padding:5px;
    min-width:57px;  
    border-bottom:1px solid #999; 
    border-top:1px solid #999; 
    border-right:1px solid #999; 
    color: black;
    }

div.day-number  { 
    background:#999; 
    padding:5px; 
    color:black; 
    font-weight:bold; 
    position: relative; 
    margin:auto;     
    width:20px; 
    text-align:center; 
    }

td.calendar-day, td.calendar-day-np {  
    padding:5px; 
    border-bottom:1px solid #999; 
    border-right:1px solid #999; 
    }

div.jumat   { 
    background:red; 
    padding:5px; 
    color:#fff; 
    font-weight:bold;  
    margin:auto; 
    width:20px; 
    text-align:center; 
    }


a {
    text-decoration: none;
    color:#fff;
} 

div.Hari-ini  { 
    background: yellow; 
    padding:5px; 
    color:#fff; 
    font-weight:bold; 
    width: 20px; 
    margin:auto ; 
    text-align:center; 
    }

 div.day-mon, 
 div.day-tue, 
 div.day-wed, 
 div.day-thu,
 div.day-sat,
 div.day-sun {
     background: #ff0000;
 } 

 div.day-fri {
     background: #999;
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...