Potrzebuję zrobić do swojej aplikacji kalendarz wizyt. Chodzi o to że użytkownik podczas rejestracji na jakąś usługę będzie widział godziny które nie są jeszcze wyrejestrowane i będzie się mógł na nie zarejestrować.
Nie mam pojęcia jak się za to zabrać. Znalazłem coś takiego: http://www.codeproject.com/Articles/638674/Full-calendar-A-complete-web-diary-system-for-jQue
Ale wydaje mi się że to przerasta trochę moje oczekiwania.
Gdyby ktoś coś podlinkował albo dał jakieś wskazówki co do wykonania byłbym wdzięczny.
0
0
Może sprecyzuj trochę czego nie wiesz.
0
Nie wiem np. czy potrzebuję znać jQuery żeby takie coś zrobić. Nie mam pomysłu jak to mam zrobić pod kątem graficznym
Powiedzmy że stworzę sobie tabelę z kolumnami od poniedziałku do piątku. W komórkach dla tych kolumn chcę umieścić godziny na które można się zarejestrować. Nie wiem tu chyba będę potrzebował jakiejś biblioteki kalendarza żeby wyświetlał mi się bieżący tydzień, a po wybraniu innego tygodnia z rozwijanej listy pokazał się następny? Chcę też żeby wyrejestrowane godziny były niedostępne do kliknięcia. Z jakąś podpowiedzią byłoby mi łatwiej coś wymyślić, co by rzeczywiście dobrze działało. Użyje w swojej aplikacji sporo elementów z bootstrapa to fajnie by było żeby to jakoś współgrało ze sobą, a nie wyglądało jak z winforms ;p
0
Nie wiem czy znajdziesz taki kalendarz.
Ja bym to wyświetlił normalnie używając bootstrapa, załadował dane, do dropdownlisty dodał kilka następnych tygodni, po wybraniu innego tygodnia przeładowałbym stronę ajaxem.
Chcę też żeby wyrejestrowane godziny były niedostępne do kliknięcia.
No to chyba najmniejszy problem, wydaje mi się że wystarczy ustawić elementowi klasę disabled.
0
Znalazłem coś takiego. Wydaje się z wyglądu bardzo OK. Musiałbym pewnie wywalić połowę z kodu bo nie potrzebuje tyle co tam jest i jakoś to wrzucić do siebie. Co o tym sądzicie ?
http://bootstrapcalendar.com/calendar.php
P.S Tylko trochę hardkor bo nie znam php. Ale pomijając dziwne znaki może uda mi się to rozczytać ;)
0
Witam,
najpierw zdecyduj czy chcesz pisać od nowa czy przerabiać gotowca, potem w czym chcesz pisać (język). Rzecz którą chcesz zrobić nie jest trudna.
0
Kurcze bawię się z tym kalendarzem http://bootstrapcalendar.com/calendar.php i nie potrafię go nawet wizualnie uruchomić.. :( Dodałem JavaScripts, dodałem klasy css, a Index.php "wrzuciłem" do widoku i załadowałem w nim pliki js i css. Obramówka strony mniej więcej działa, ale kalendarza nie ma. Nie wiem co muszę zrobić żeby to jakoś odpalić :/ nie znam ani js, ani php. Gdyby komuś się chciało na to rzucić okiem i dać jakąś wskazówkę jak to uruchomić używając MVC byłbym wdzięczny. W linku jest ten kalendarz na githubie -> https://github.com/mariocoski/Bootstrap-calendar
Myślałem też nad napisanie własnego "kalendarza" ale jeszcze nic sensownego nie wymyśliłem, a ten co tu wrzuciłem byłby dla mnie idealny.
0
A PHP do IIS doinstalowałeś?
0
Nie.. A jeżeli ja nie chcę używać php, to czy jest mi to do czegoś potrzebne? Ten kalendarz powinien załadować się z javascript?
Mój widok wygląda mniej więcej tak:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@Styles.Render("~/Content/calendar.css")
@Styles.Render("~/Content/bootstrap.css")
</head>
<body>
<div class="container">
<!--horizontal calendar 1-->
<div class="row">
<div class="col-sm-12">
<h3><span class="glyphicon glyphicon-calendar"></span> Try the demo!</h3>
</div>
<!-- small horizontal calendar 1-->
<div class="col-sm-12 visible-xs">
<div class="horizontal-calendar-small-wrapper" data-calendar-id="334455" id="horizontal-calendar-small-wrapper-334455">
<div class='preloader2'></div>
</div><!--end of horizontal-calendar-small-wrapper-->
</div><!--end of col-sm-12-->
</div><!--end of row-->
<div class="row marg-top ">
<!-- big horizontal calendar 1-->
<div class="col-sm-4 hidden-xs">
<div class="panel panel-default panel-address panel-calendar-height">
<div class="company-tag label label-primary">Company details</div>
<div class='panel-body'>
<h4>Your Company 1</h4>
<iframe class="company-map" src="https://www.google.com/maps/embed?pb=!1m14!1"></iframe>
<h4>Street Name 1</h4>
<p>Street Name 1</p>
<p>Postcode 1 City 1</p>
<p>Country</p>
<p><a href='#'>www.example.com</a><p>
</div><!--end of panel-body-->
</div><!--end of panel-->
</div><!--end of col-sm-4-->
<div class='col-sm-8 hidden-xs'>
<div id="horizontal-calendar-big-wrapper-334455" data-calendar-id="334455" class="horizontal-calendar-big-wrapper carousel slide" data-wrap="false" data-ride="carousel" data-interval="false">
<div class='preloader'></div>
</div><!--end of horizontal-calendar-big-->
</div><!--end of col-sm-8-->
</div><!--end of row-->
</div>
</div>
<script src="~/Scripts/jquery.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="~/Scripts/cors.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap-calendar.js" type="text/javascript"></script>
<script src="~/Scripts/calendar.js" type="text/javascript"></script>
</body>
</html>
1
Biorąc po uwagę że w plikach w tym projekcie są odwołania do plików PHP:
https://github.com/mariocoski/Bootstrap-calendar/blob/master/js/calendar.js#L16
https://github.com/mariocoski/Bootstrap-calendar/blob/master/js/bootstrap-calendar.js#L18
i w paru innych miejscach, więc musisz to wszystko przerobić do tego mogą się pojawić konflikty oraz musisz dodać jQuery przed dodaniem bootstrapa. Więc jak masz w _Layout.cshtml już dodane ~/Scripts/jquery-{version}.js a w widoku inne <script src="~/Scripts/jquery.js" type="text/javascript"></script> to musisz jedno wywalić do tego musisz poprawić URLe obrazka i inne pierdoły i dopiero wtedy zadziała.
2
A może po prostu nie utrudniać sobie życia jakimiś lewymi kontrolkami używającymi PHP?
Ja w dokładnie takim samym celu używam fullcalendara, zgodnie z tą instrukcją: http://weblogs.asp.net/gunnarpeipman/using-fullcalendar-jquery-component-with-asp-net-mvc
0
DibbyDum, to sporo roboty bym z tym miał :/. Dzięki za objaśnienie.
somekind, dzięki za link. Postaram się go wykorzystać.
0
Jako że ten kalendarz który podlinkował somekind to jest ten sam co ten: http://www.codeproject.com/Articles/638674/Full-calendar-A-complete-web-diary-system-for-jQue chciałem wykorzystać ten z codeproject bo jest tam sporo pokazane i wyjaśnione.
Tylko tutaj pojawia się problem. W załącznikach do pobrania jest SQLScript który wygląda tak:
USE [master]
GO
/****** Object: Database [FullCalendarMVC_Demo] Script Date: 08/17/2013 16:21:40 ******/
CREATE DATABASE [FullCalendarMVC_Demo] ON PRIMARY
( NAME = N'FullCalendarMVC_Demo', FILENAME = N'c:\Program Files\Microsoft SQL Server\MSSQL10_50.SQLEXPRESS\MSSQL\DATA\FullCalendarMVC_Demo.mdf' , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
LOG ON
( NAME = N'FullCalendarMVC_Demo_log', FILENAME = N'c:\Program Files\Microsoft SQL Server\MSSQL10_50.SQLEXPRESS\MSSQL\DATA\FullCalendarMVC_Demo_log.ldf' , SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET COMPATIBILITY_LEVEL = 100
GO
IF (1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled'))
begin
EXEC [FullCalendarMVC_Demo].[dbo].[sp_fulltext_database] @action = 'enable'
end
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET ANSI_NULL_DEFAULT OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET ANSI_NULLS OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET ANSI_PADDING OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET ANSI_WARNINGS OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET ARITHABORT OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET AUTO_CLOSE OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET AUTO_CREATE_STATISTICS ON
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET AUTO_SHRINK OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET AUTO_UPDATE_STATISTICS ON
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET CURSOR_CLOSE_ON_COMMIT OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET CURSOR_DEFAULT GLOBAL
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET CONCAT_NULL_YIELDS_NULL OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET NUMERIC_ROUNDABORT OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET QUOTED_IDENTIFIER OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET RECURSIVE_TRIGGERS OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET DISABLE_BROKER
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET DATE_CORRELATION_OPTIMIZATION OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET TRUSTWORTHY OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET PARAMETERIZATION SIMPLE
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET READ_COMMITTED_SNAPSHOT OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET HONOR_BROKER_PRIORITY OFF
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET READ_WRITE
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET RECOVERY SIMPLE
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET MULTI_USER
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET PAGE_VERIFY CHECKSUM
GO
ALTER DATABASE [FullCalendarMVC_Demo] SET DB_CHAINING OFF
GO
USE [FullCalendarMVC_Demo]
GO
/****** Object: Table [dbo].[AppointmentDiary] Script Date: 08/17/2013 16:21:40 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[AppointmentDiary](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Title] [nvarchar](100) NOT NULL,
[SomeImportantKey] [int] NOT NULL,
[DateTimeScheduled] [datetime] NOT NULL,
[AppointmentLength] [int] NOT NULL,
[StatusENUM] [int] NOT NULL,
CONSTRAINT [PK_ConsultantBookings] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
/****** Object: Default [DF_ConsultantBookings_Status] Script Date: 08/17/2013 16:21:40 ******/
ALTER TABLE [dbo].[AppointmentDiary] ADD CONSTRAINT [DF_ConsultantBookings_Status] DEFAULT ((0)) FOR [StatusENUM]
GO
Nie wiem co ja mam z tym zrobić. Próbuje utworzyć tą bazę danych w różnoraki sposób ale mi nie wychodzi i dalej nie chce działać :(
W aplikacji pobranej z codeproject mam taki web.config
<connectionStrings>
<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-FullCalendar_MVC-20130816144834;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-FullCalendar_MVC-20130816144834.mdf" providerName="System.Data.SqlClient" />
<add name="DiaryContainer" connectionString="metadata=res://*/Diary.csdl|res://*/Diary.ssdl|res://*/Diary.msl;provider=System.Data.SqlClient;provider connection string="data source=(LocalDb)\v11.0;initial catalog=FullCalendarMVC_Demo;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />
</connectionStrings>
Nie mam pojęcia o co chodzi w połączeniu dla DiaryContainer
Jeżeli uruchamiam aplikację dostaję taki wyjątek: Cannot open database "FullCalendarMVC_Demo" request by the login. The Login failed.\r\nLogin failed for user 'Lenovo\User'."
Dodam(nie wiem czy coś to zmienia) że ta aplikacja korzysta z Entity.
Wiem co oznacza ten błąd.. ale nie umiem sobie z nim poradzić... byłbym wdzięczny za pomoc, bo już nie mam siły do tego.
EDIT: Udało mi się! Nie wiem jakim cudem ale w końcu działa. Jak mnie te bazy danych irytują za każdym razem..
0
@somekind W związku z tym że używasz tego kalendarza mam do Ciebie prośbę żebyś podpowiedział mi, jak dodać godziny do komórek w tabeli dla każdego dnia?
Chciałbym zrobić coś takiego, że kiedy użytkownik wybierze godzinę z kalendarza dane o wybranym terminie powędrują do kontrolera i tam już sobie poradzę. Wydaje mi się że mniej więcej od strony widoku będzie to tak wyglądać:
eventClick: function(event, dayData, minuteData, allDay, revertFunc) //eventClick chciałbym żeby odnosił się do wybranej godziny
{
UpdateEvent(event.id, event.start);
}
function UpdateEvent(EventID, EventStart, EventEnd) {
var dataRow = {
'ID': EventID,
'NewEventStart': EventStart,
'NewEventEnd': EventEnd
}
$.ajax({
type: 'POST',
url: "/Home/UpdateEvent",
dataType: "json",
contentType: "application/json",
data: JSON.stringify(dataRow)
});
}
W załączniku przedstawiam to o co mi chodzi.