Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Kalendarz JS
Forum PHP.pl > Forum > Przedszkole
piotrek998
Witam. Odwzorowuje strone ciach i tam jest kalendarz. Napisałem kod html
  1. <div class="wow fadeIn content calendar">
  2. <h1>Kalendarium <b>KWIECIEŃ 2018</b></h1>
  3.  
  4. <form action="" method="post" class="prev_month">
  5. <input type="image" src="prev_cal.jpg" />
  6. <input type="hidden" name="year" value="2018" />
  7. <input type="hidden" name="month" value="04" />
  8. <input type="hidden" name="action_calc" value="prev_cal" />
  9. </form>
  10.  
  11. <form action="" method="post" class="next_month">
  12. <input type="image" src="next_cal.jpg" />
  13. <input type="hidden" name="year" value="2018" />
  14. <input type="hidden" name="month" value="04" />
  15. <input type="hidden" name="action_calc" value="next_cal" />
  16. </form>
  17.  
  18. <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span class="today">26</span><span>27</span><span>28</span><span>29</span><span>30</span>
  19. </div>


oraz css
  1. .calendar{
  2. padding:10rem 0;
  3. text-align:center;
  4. position:relative;
  5. }
  6.  
  7. .calendar span,
  8. .calendar a{
  9. width:3%;
  10. text-align:center;
  11. display:inline-block;
  12. text-decoration:none;
  13. line-height:7rem;
  14. background: #F2F2F2;
  15. }
  16.  
  17. .calendar a.entry{
  18. background:#2e3b59;
  19. color:#fff;
  20. position:relative;
  21. }
  22.  
  23. .calendar .today{
  24. background:#e4e4e4;
  25. font-weight:bold;
  26. }
  27.  
  28. .calendar a.entry .info img{
  29. position:absolute;
  30. top:-10px;
  31. left:50%;
  32. transform:translate(-50%,0);
  33. }
  34.  
  35. .calendar a.entry .info{
  36. display:none;
  37. padding:1rem 2rem;
  38. color:#fff;
  39. background:#2e3b59;
  40. font-size:2rem;
  41. text-align:center;
  42. text-decoration:none;
  43. position:absolute;
  44. bottom:-11rem;
  45. z-index:99999999999999;
  46. left:50%;
  47. white-space:nowrap;
  48. transform:translate(-50%,0);
  49. box-shadow: 7px 6px #c8c8c8;
  50. }
  51.  
  52. .calendar a.entry:hover{
  53. text-decoration:none;
  54. }
  55.  
  56. .calendar a.entry:hover .info{
  57. display:block;
  58. }
  59.  
  60. .calendar .prev_month{
  61. position:absolute;
  62. left:5px;
  63. bottom:11rem;
  64. }
  65. .calendar .next_month{
  66. position:absolute;
  67. right:5px;
  68. bottom:11rem;
  69. }

błagam o pomoc z javascript bo dopiero zaczynam i jestem kompletnie zielony z js. Skrypt ma za zadanie zwracać obecny dzień miesiąc oraz rok oraz za pomocą strzałek w przód i w tył umożliwiać zmiane miesiąca czyli jak mamy teraz kwiecień to gdy klikne następny miesiąc ma być maj a gdy klikne w tył ma być kwiecień itd. Błagam o jakiś kod z tym js bo naprawde próbowalem sam to ogarnąć ale nie działało tak jak trzeba. Błagam o pomoc.
Kshyhoo
Witamy na Forum. Zapoznaj się z panującymi tu zasadami, żeby uniknąć blokady postów. Szczególnie pierwsza linijka mojej sygnatury...

Na tej stronie nie widzę kalendarza, więc usuwam linki.
Twój kod nie zawiera JS, więc gdzie tkwi problem?
Pyton_000
@kshyhoo na samym dole był wink.gif Taki "kalendarz" w postaci samych dat w 1 wierszu. Pewnie wydarzenia miały się pojawiać niżej ale albo coś nie pykło albo nic nie ma smile.gif
piotrek998
Nie chodi mi o kod html i css lecz o sam javascript. Przecież wszystko wyjaśniłem w poście. Żadanego htmla i cssa tylko czysty js.
wxm
Musisz się podpiąć np pod keypress i zmieniać wartości sprawdzając czy nowa wartość mieści się w założonym zakresie (miesiąc 1 - 12, dzień 1 - 31 w zależności od wybranego miesiąca i roku) i tyle smile.gif Nie widziałem oryginału więc ciężko stwierdzić jak tam było zrobione ale mając dostęp do strony można to sprawdzić przecież w 5 minut jak zrobiony był oryginał smile.gif
Kshyhoo
thumbsdownsmileyanim.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.