Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Kalendarz JS, Kalendarz JS
piotrek998
post 28.04.2018, 10:30:43
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 27.04.2018

Ostrzeżenie: (0%)
-----


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.
Powód edycji: [Kshyhoo]: seo bb-code
Go to the top of the page
+Quote Post
Kshyhoo
post 28.04.2018, 11:05:14
Post #2





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że




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?


--------------------
Go to the top of the page
+Quote Post
Pyton_000
post 28.04.2018, 11:34:41
Post #3





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


@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
Go to the top of the page
+Quote Post
piotrek998
post 29.04.2018, 16:55:19
Post #4





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 27.04.2018

Ostrzeżenie: (0%)
-----


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.

Ten post edytował piotrek998 29.04.2018, 16:57:18
Go to the top of the page
+Quote Post
wxm
post 29.04.2018, 19:08:44
Post #5





Grupa: Zarejestrowani
Postów: 26
Pomógł: 1
Dołączył: 17.02.2018

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
Kshyhoo
post 29.04.2018, 20:05:05
Post #6





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że




thumbsdownsmileyanim.gif


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 13:44