Ever needed to display table records as a calendar display using just a data provider and a date field? Using Bootstrap 3 and jQuery to create a responsive calendar widget which displays any number of events.
Now with internalizations into 7 languages (slovak, czech, german, english, spanish, russian, and polish), for additional translations send pull requests please.
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist naduvko/yii2-calendarview-widget "^1.0"
or add
"naduvko/yii2-calendarview-widget": "^1.0"
to the require section of your composer.json
file.
To use this widget, you will need a controller and a view:
Lets say you got a table with a standard model and search provider (instanceof \yii\data\DataProviderInterface) that you use in your GridView for example :
CREATE TABLE `calendar` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
`date` datetime NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT 'Date',
`val` int(11) NOT NULL COMMENT 'Value',
PRIMARY KEY (`id`),
) ENGINE=InnoDB DEFAULT CHARSET=utf8
just a standard activity record model for instance
class Calendar extends \yii\db\ActiveRecord
{
/**
* @inheritdoc
*/
public static function tableName()
{
return 'calendar';
}
/**
* @inheritdoc
*/
public function rules()
{
return [
[['date', 'val'], 'required'],
];
}
/**
* @inheritdoc
*/
public function attributeLabels()
{
return [
'id' => 'ID',
'date' => 'Date',
'val' => 'Value',
];
}
}
just a standard search provider
class CalendarSearch extends Calendar
{
public function search($params)
{
$query = Activity::find()->where(['user_id'=>Yii::$app->user->getId()]);
$dataProvider = new ActiveDataProvider([
'query' => $query,
'pagination' => ['pageSize' => 30],
'sort'=> ['defaultOrder' => ['start'=>SORT_DESC]]
]);
if (!($this->load($params) && $this->validate())) {
return $dataProvider;
}
$query->andFilterWhere([
'id' => $this->id,
'date' => $this->calories,
'val' => $this->peak_heartrate,
]);
return $dataProvider;
}
}
then you will need a controller
class CalendarController extends Controller
{
public function actionIndex()
{
$searchModel = new CalendarSearch;
$dataProvider = $searchModel->search(Yii::$app->request->getQueryParams());
return $this->render('index', [
'dataProvider' => $dataProvider
]);
}
}
and the view
use naduvko\calendarview\CalendarView;
echo CalendarView::widget(
[
// mandatory
'dataProvider' => $dataProvider,
'dateField' => 'date',
'valueField' => 'val',
// optional params with their defaults
'unixTimestamp' => false, // indicate whether you use unix timestamp instead of a date/datetime format in the data provider
'weekStart' => 1, // date('w') // which day to display first in the calendar
'title' => 'Calendar',
'views' => [
'calendar' => '@vendor/naduvko/yii2-calendarview-widget/views/calendar',
'month' => '@vendor/naduvko/yii2-calendarview-widget/views/month',
'day' => '@vendor/naduvko/yii2-calendarview-widget/views/day',
],
'startYear' => date('Y') - 1,
'endYear' => date('Y') + 1,
'link' => false,
/* alternates to link , is called on every models valueField, used in Html::a( valueField , link )
'link' => 'site/view',
'link' => function($model,$calendar){
return ['calendar/view','id'=>$model->id];
},
*/
'dayRender' => false,
/* alternate to dayRender
'dayRender' => function($model,$calendar) {
return '<p>'.$model->id.'</p>';
},
*/
]
);