JavaScript
DayPilot Calendar supports client-side event filtering since build 8.2.2224.
- Use onEventFilter event handler to implement the filtering rule.
- Use events.filter(param) to filter the events using the supplied parameter.
<div class="space"> Filter: <input id="filter" /> <a href="#" id="clear">Clear</a> </div> <div id="dp"></div> <script> var dp = new DayPilot.Calendar("dp"); // ... dp.onEventFilter = function(args) { // display only events that contain the specified text, case insensitive if (args.e.text().toUpperCase().indexOf(args.filter.toUpperCase()) === -1) { args.visible = false; } }; dp.init(); $(document).ready(function() { $("#filter").keyup(function() { var query = $(this).val(); dp.events.filter(query); }); $("#clear").click(function() { $("#filter").val(""); dp.events.filter(null); return false; }); }); </script>
Demo
ASP.NET WebForms
Use ClientState to persist the filter parameters.
You can store the filter settings in .clientState property on the client side:
dpc.clientState.filterText = 'text'; dpc.clientState.filterType = 'finished';
ClientState is persisted and updated with every callback (until you reload the page) and it's accessible on the server side.
string filterText = (string) DayPilotCalendar1.ClientState["filterText"]; string filterType = (string) DayPilotCalendar1.ClientState["filterType"];
DayPilotCalendar1.DataSource = LoadData(filterText, filterType); DayPilotCalendar1.DataBind(); DayPilotCalendar1.Update();
ASP.NET MVC
Use ClientState to persist the filter parameters.
You can store the filter settings in .clientState property on the client side:
dpc.clientState.filterText = 'text'; dpc.clientState.filterType = 'finished';
ClientState is persisted and updated with every callback (until you reload the page) and it's accessible on the server side.
string filterText = (string) ClientState["filterText"]; string filterType = (string) ClientState["filterType"]; Events = LoadEvents(filterText, filterType); Update();