Я руками делал.
Ставил календарик на div и у дива ставил стиль display:none. При щелчке на стрелочку - ставишь display:block.Мой блог

Добавь перед дивом <img> со стрелочкой, а на событие onclick этого имаджа повесь изменение стиля дива на display:block.Мой блог

Никто не пишет решение сразу, потому что хотят, что бы ты сам попытался понять как можно это сделать. Поэтому подсказывают только общее направление куда рыть. И это правильно. Иначе ведь как еще можно изучить что-то как не самостоятельно, верно? ;)

Ну да ладно.

Я бы сделал через стили:

<style>
}
.hidden {
 display: none;
 visibility: hidden;
}
.visible {
 display: block;
 visibility: visible;
 position: absolute;
}
</style>
<script language="javascript">

function switchVisibility(elm) {

if (elm) {

if (elm.className == "hidden") {

elm.className = "visible";
} else {

elm.className = "hidden";
}
}
 
function switchCalendar(cldrId) {

var cldr = document.getElementById(cldrId);
switchVisibility(cldr);
}
</script>
..........
<img .... onclick="switchCalendar('calendar1');"....><div id="calendar1" class="hidden".../>

Однако сразу предупреждаю. При таком решении у тебя календарик будет схлопываться каждый раз при перезагрузке страницы, т.е. например при переходе к следующему месяцу. Чтобы этого не было, нужно что-то придумать. Тут уж я не знаю что подсказать, возможно нужно будет сохранять состояние календарика в хидденах, а при перезагрузке страницы восстанавливать или еще что-то.Мой блог